Javascript 创建第二个或下一个<；李>；违约情况下<；李>；重新加载页面| jQuery后，本地存储

我尝试为文件夹创建本地存储数据

HTML:

var count = 1;
$(".submitButton").click(function() {
let label = count++;
// make a function that returns the DOM with updated count
function getNewList(foldername) {

  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;">' +
    foldername + '<span class="hyperspan" style="width:100%; height:100%; left:0; top:0;"></span></a>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</li>';
  return addFolder;
}

  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);
  }
}

这是我默认的

li

。我称之为“观众文件夹”

jQuery:

var count = 1;
$(".submitButton").click(function() {
let label = count++;
// make a function that returns the DOM with updated count
function getNewList(foldername) {

  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;">' +
    foldername + '<span class="hyperspan" style="width:100%; height:100%; left:0; top:0;"></span></a>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</li>';
  return addFolder;
}

  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);
  }
}

var计数=1；
$（“.submitButton”）。单击（函数（）{
让标签=计数++；
//生成一个函数，返回具有更新计数的DOM
函数getNewList（foldername）{
var addFolder='
'+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“
”；
返回addFolder；
}
var inputan=$（“#input_nameFolder”）.val（）；
//更新结果数组
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果==null）{
结果=[]；
}
让newfolderHTML=getNewList（inputan）；
结果：推({
文件夹：newfolderHTML
});
//保存新的结果数组
setItem（“folderList”，JSON.stringify（result））；
//追加新的li
$（“.nav”）.append（newfolderHTML）；//我想要包含myDiv
//清晰输入
$（“#输入名称文件夹”）.val（“”）；
});
//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果！=null）{
//在DOM中获取导航引用
设资产净值=$（“.nav”）；
//清除html内容
html（“”）；
对于（变量i=0；i

如何在我的默认li（所有观众）下添加新的标签 重新加载页面后/用户输入新值时单击RunJSFIDLE

您可以看到，在添加输入并重新加载web/jsfiddle之后，新的输入文件夹（第二个

li

）将覆盖所有访问者（第一个

li

）

---

初始化时只需保存初始元素，请参见：

// 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);
    }
} else {
    //Save the "All Audiences" content upon empty folderList
    let initialElement = [];
    initialElement.push({
        folder: $('ul.nav').html()
    });
    localStorage.setItem("folderList", JSON.stringify(initialElement));
}

//在初始化时填充ul
var result=JSON.parse（localStorage.getItem（“folderList”）；
如果（结果！=null）{
//在DOM中获取导航引用
设资产净值=$（“.nav”）；
//清除html内容
html（“”）；
对于（变量i=0；i

---

看：

你救了我的命！！在您处理它时：添加一些代码，至少检查folderList中是否包含有效数据。您信任客户机将数据交付给您的应用程序，这可能会增加folderList中条目的功能。如果folderList被破坏或操纵，可能会发生奇怪的事情。我正在处理文件夹单击功能中的一个问题。单击文件夹时重新加载页面。