Question

所以，我在Javascript中完成初学者，现在正尝试用列表做一个项目，用户可以使用现有列表或创建自己的列表（div，ul），还有列表项（li），并对所有这些内容进行排序，删除列表项，并将所有内容保存到本地存储。

到目前为止，我已经设法弄清楚如何将现有列表及其内容保存到本地存储，因为我知道他们的ID，但我不知道如何保存用户创建的列表。当用户创建新列表时，它从用户输入获得与列表名称相同的ID，并且唯一的更改是ID为小写且空格被删除。

我试图阅读很多关于本地存储的内容，并且还研究了创建某种类型的循环或数组来存储用户创建的所有ID的元素，但我不知道真的很了解它...

项目链接： http://elinrein.se/hv/gpa130/listproject/projekt-m4-list.html

这是我的整个脚本代码：

<script type="text/javascript">

    // jQuery UI function to sort list items
      $(function() {
    $( "ul" ).sortable({
          connectWith: ".connectedSortable"
        }).disableSelection();
      });

          function addlistitem() {

            li = document.getElementById("name").value;

            if (li != "") {
            document.getElementById("regular").innerHTML +=  "<li>"+"<strong>"+li+"</strong>"+"<img src='x.png' onclick='deletelielement(this);'></li>";
            }

            else {
            alert("You need to write in something to add it!");
            }

            document.getElementById("name").value = "";
            }


          function deletelielement(litag) {   
          litag.parentElement.remove();
          }

          // Skapa ny lista?
          function createBox() {

          // Undeclared variables to enable access from local storage
          listname = document.getElementById("listname").value;
          listnameid = listname.toLowerCase().replace(/\s+/g, '');


          if (listname != "") {

          var div = document.createElement("div");        
          var headline = document.createElement("h3");       
          var ul = document.createElement("ul");        
          headline.innerHTML = listname;
          div.appendChild(headline);
          div.appendChild(ul);                                    
          document.body.appendChild(div);                    
          div.setAttribute("id", "greybox");
          div.className = "narrow";
          ul.setAttribute("id", listnameid);
          ul.className = "connectedSortable";

          $( "ul" ).sortable({
          connectWith: ".connectedSortable"
          }).disableSelection();
          }

          else {
          alert("Your list needs a name!");
          }

          document.getElementById("listname").value = "";

          for (var i = 0; i < listnameid; i++) {
          allcustom = listnameid[i];
          }
          }

          function savelists() {

          localStorage['listul'] = document.getElementById('listul').innerHTML;
          localStorage['regular'] = document.getElementById('regular').innerHTML;

          }


          function loadlists() {

          document.getElementById('listul').innerHTML = localStorage['listul'] || '';
          document.getElementById('regular').innerHTML = localStorage['regular'] || '';
          }

        </script>

Answer 1

您可以保存这样的唯一列表：

localStorage['savelist'][listnameid] = document.getElementById(listnameid).innerHTML;

这样，您就会在localStorage['savelist']或localStorage.savelist中拥有一系列已保存的列表。请务必先将savelist定义为对象：localStorage.savelist = {};。

因此，如果我创建了两个列表：myFirstList和theOtherOne，则可以将其显示为：

localStorage.savelist.myFirstList
localStorage.savelist.theOtherOne

或数组格式：

localStorage.savelist['myFirstList']
localStorage.savelist['theOtherOne']

注意，我建议您实际将列表保存为项目数组，而不是使用完整的HTML标记来生成列表数据。

正如我们在评论中所说，这是一个使用JS对象创建列表并将其保存到localStorage的超简单简单示例。 updateLists函数用于生成结果HTML：http://jsfiddle.net/t4h9Ldto/（由于沙箱限制，无法在此处创建它作为代码段）

这是一个略微改进的版本，允许使用相同的方法将项目添加到默认列表：http://jsfiddle.net/t4h9Ldto/1/

这应该足以让你入门。

Javascript本地存储用户创建了具有未知ID的元素

1 个答案: