javascript - 使用 localStorage 保存数据 <li> include <div>

Question

我尝试为“我的文件夹创建”创建 LocalStorage 数据，我正处于学习阶段。

用于创建文件夹的图像

在 JSFiddle 中，我只能保存 2 个元素中的 1 个，<li>或<div>并且在第一次提交时，输入值不会出现在 div 内。

var count = 1;
// make a function that returns the DOM with updated count
function getNewList() {
  let label = count++;
  var addFolder = '<li>' +
    '<div class="zf-folder" style="width: 232px;">' +
    '<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">' +
    '<div class="_sideFolder"></div>' +
    '<div class="_iconText" style="width: 215px">' +
    '<div class="ellipsis">' +
    '<div class="_iconFolder">' +
    '<div class="_icon-col">' +
    '</div>' +
    '</div>' +
    '<a href="#folder' + label + '" data-toggle="tab" style="text-decoration: none;"></a>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</li>';
  return addFolder;
}

// Lets save them using submit.
$(".submitButton").click(function() {
  var inputan = $("#input_nameFolder").val();
  $('.nav li:last').find('a').html(inputan).focus();
  document.getElementById("input_nameFolder").value = "";

  // update the result array
  var result = JSON.parse(localStorage.getItem("folderList"));
  if (result == null)
    result = [];

  result.push({
    folder: getNewList(),
    nameFolder: inputan
  });
  // save the new result array
  localStorage.setItem("folderList", JSON.stringify(result));

  // append the new li
  $(".nav").append($(getNewList())); // here i want display div include input value

});

// on init fill the ul
var result = JSON.parse(localStorage.getItem("folderList"));
if (result != null) {
  for (var i = 0; i < result.length; i++) {
    var item = result[i];
    debugger
    $(".nav").append($(getNewList()).html(item.folder)); // and i want display div include input value.
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_nameFolder" name="nameFolder">
<input type="button" class="submitButton" id="submitButton" value="ADD">

<!-- Result goes here -->
<ul class="nav">
</ul>

MY JSFiddle

Answer 1

编辑

如果您将以前的 HTML 存储在 localstorage 中，请重新加载页面两次，因为它的 HTML 结构错误，我添加了 localStorage.removeItem('folderList'); 在 fiddle 脚本的末尾，以清除以前保存的 HTML 当您在脚本中使用时应该将其删除，或者您可以使用下面提供的代码块而不是从 fiddle 中复制。

<小时/>

首先，您的 fiddle 的脚本加载顺序错误。

谈到这个问题，您每次从 localStorage 加载时都会附加 HTML，并且在您重新加载页面时会继续附加菜单，如下所示您说您正在学习，所以我将继续提供代码，以便您将更改与您的脚本进行比较。

不要让事情变得复杂，而应该让事情变得简单，尤其是在刚开始学习的时候。

您在获取 HTML 后单独添加文件夹名称，而您可以在函数 getNewList 中传递名称以生成 html使用文件夹名称并在循环中您可以附加它们，请参阅 fiddle以及对下面代码的引用

var count = 1;

    // make a function that returns the DOM with updated count
    function getNewList(foldername) {
        let label = count++;
        var addFolder = '<li>' +
            '<div class="zf-folder" style="width: 232px;">' +
            '<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">' +
            '<div class="_sideFolder"></div>' +
            '<div class="_iconText" style="width: 215px">' +
            '<div class="ellipsis">' +
            '<div class="_iconFolder">' +
            '<div class="_icon-col">' +
            '</div>' +
            '</div>' +
            '<a href="#folder' + label +
            '" data-toggle="tab" style="text-decoration: none;"><span class="hyperspan" style="width:100%; height:100%; left:0; top:0;">' +
            foldername + '</span></a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</li>';
        return addFolder;
    }


    $(".submitButton").click(function () {
        var inputan = $("#input_nameFolder").val();

        // update the result array
        var result = JSON.parse(localStorage.getItem("folderList"));

        if (result == null) {
            result = [];
        }

        let newfolderHTML = getNewList(inputan);

        result.push({
            folder: newfolderHTML
        });

        // save the new result array
        localStorage.setItem("folderList", JSON.stringify(result));

        // append the new li
        $(".nav").append(newfolderHTML); // i want include myDiv

        //clear input 
        $("#input_nameFolder").val('');
    });

    // on init fill the ul
    var result = JSON.parse(localStorage.getItem("folderList"));
    if (result != null) {
        //get the nav reference in DOM
        let nav = $(".nav");

        //clear the html contents
        nav.html('');

        for (var i = 0; i < result.length; i++) {
            var item = result[i];
            nav.append(item.folder);
        }
    }