javascript - LocalStorage追加新元素

他是：My First JSFiddle。它只是追加<li></li>。它适用于LocalStorage并显示结果

$(".nav").append($("<li></li>").html(inputan));

我想要像My Second JSFiddle一样追加：

var addFolder = '<li>' +
  '<div class="zf-folder">' +
    '<a></a>' +
  '</div>' +
'</li>';

$(".nav").append($(addFolder).html(inputan));

这适用于LocalStorage，但在重新加载页面时未显示结果。我想使用这样的方法，因为我的代码如下所示：

使用append方法$('.nav').append(addFolder);

如何使用第二个jsFiddle方法显示LocalStorage结果？

最佳答案

您在addFolder单击处理程序中具有submitButton，因此它仅在处理程序功能范围中可用。

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

 // move the below variable outside of this function
  var addFolder = '<li>' +
    '<div class="zf-folder">' +
      '<a></a>' +
    '</div>' +
  '</li>';
  ...
});

将addFolder移动到函数之外，它应该可以工作。

Updated your fiddle。

编辑：获取正确的索引

您可以添加一个返回addFolder以及当前/更新索引的函数。该功能可用于页面加载时的首次呈现以及每次从输入中添加项目时使用。

就像是：

var count = 1;
function getNewList() {
  var addFolder = '<li data-index="' + (count++) + '">' +
    '<div class="zf-folder">' +
    '<a></a>' +
    '</div>' +

    '</li>';
  return addFolder;
}

您可以在这里查看：
Edited Fiddle for index

//检查控制台中data-index项上的li

AddFolder

javascript - LocalStorage追加新元素