javascript - 重新加载页面后在默认 下创建第二个或下一个 | jQuery、本地存储

Question

我尝试为“我的文件夹创建”创建 LocalStorage 数据。

HTML:

This is my default li. I call it All audience folder's

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

  <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="_1i5w">
              <div class="_icon-col">
              </div>
            </div>
            <a href="#mainFolder" data-toggle="tab" style="text-decoration: none;">All Audiences<span class="hyperspan" style="position:absolute; width:100%; height:100%; left:0; top:0;"></span></a>
          </div>
        </div>
      </div>
    </div>
  </li>

</ul>

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

How to adding new <li> tag under my default li (all audience) after reload page/click run jsfiddle when user input a new value?

添加输入并重新加载 web/jsfiddle 后，您可以看到，新输入文件夹(第二个 li )覆盖所有受众(第一个 li )。

<强> JSFiddle

Answer 1

您只需在初始化时保存初始元素，请参阅:

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

参见:JSFiddle