Question

这是我基于模块模式的待办事项列表，这个工作正常，只想知道两件事。

此代码是否仍然可以简化？一旦我添加了一个列表，如果我刷新页面，那么，这些列表就不见了，但是，我的要求是，当我使用“删除列表”时，这些列表将被删除。我怎么能修改这个？有什么建议吗？

<!DOCTYPE html>
<html>
<head>
    <title> TO-Do List In Javascript </title>
    <style>
    #message{
    left: 0px;
    margin-left: 10px;
    }
    div#todo > div input {
    top:-39px;
    margin-left: 226px;

    position: relative;
    }
    div#todo > div > p {
        padding: 0px;
        width: 210px;

    }
    div#todo  div {
    top:0px;
    padding:0px;
    margin:0px;
    }
    </style>
</head>
<body>

  <div id="itemin"><input type="text" id="txt1" name="text1"/><input type="button" id="bt1" value="Add List"/><input type="button" id="bt2" value="Remove List"/></div>
 <div id="todo">
 </div>
    <script type="text/javascript">
    var Todo = Todo || {};

var element = document.getElementById("todo");
var elementChiCount="";

Todo.Item = (function(){

       function creatList(someInput) {

       elementChiCount = element.getElementsByTagName("div").length;

         var txtNode = document.createTextNode(someInput);
         var elemNode = document.createElement("p");
         elemNode.appendChild(txtNode);

         var elemCheckbox = document.createElement("input");

         elemCheckbox.setAttribute("id", 'check'+ elementChiCount);
         elemCheckbox.setAttribute("type", 'checkbox');

         var divElem = document.createElement("div");
          divElem.appendChild(elemNode);
          divElem.appendChild(elemCheckbox);

         divElem.setAttribute("id", "item"+elementChiCount);
         divElem.setAttribute("style", "border: 1px solid pink; width: 250px;padding-left:10px");
         element.appendChild(divElem);

     }
     function addList(txtInput) {
         creatList(txtInput);
     }
       function deleteList() {
         elementChiCount = element.getElementsByTagName("div").length;
         for (var i = 0; i < elementChiCount; i++) {

           var elementCurr = element.getElementsByTagName("div")[i];

         if(elementCurr.getElementsByTagName("input")[0].checked == true){
          var thisElem = elementCurr.parentNode;
         thisElem.removeChild(elementCurr);
         break;
         } else {
         }       }

     }

    return {
      add: addList,
      del: deleteList

    }
})();


    </script>
 <script type="text/javascript">
 var actBtn = document.getElementById("bt1"); 
 var delBtn = document.getElementById("bt2"); 

 actBtn.onclick = function() {
 var txtVaue = document.getElementById("txt1").value;
 Todo.Item.add(txtVaue);
}

delBtn.onclick = function() {
 Todo.Item.del();
}
</script>

 </body>
</html>

Answer 1

这是关于如何保留列表的问题的答案，直到您想删除它们为止。

为什么不通过window.localstorage查看您的列表是否会在刷新后继续存在。

以下代码使用localStorage和JSON库。

JSON库将listData json对象转换为字符串以便存储它（localStorage只存储字符串），然后在检索该字符串后，将其转换回json对象，供您在脚本中使用。

// to save the list
var listDataAsString = JSON.stringify(listData);
localStorage.setItem('list_' + listId, listDataAsString);

// to get the list
var listDataAsString = localStorage.getItem('list_' + listId);
var listData = JSON.parse(listDataAsString);

// to remove the list
localStorage.removeItem('list_' + listId);

我个人使用mozilla的localforage库，但是你需要查看promises或callbacks。最简单的是使用回调。

// to save the list
localforage.setItem('list_' + listId, listData, function (err, listData) {
    console.log('Saved list', listId, listData);
});

// to get the list
localforage.getItem('list_' + listId, function (err, listData) {
    console.log('Retrieved list', listId, listData);
});

// to remove the list
localforage.removeItem('list_' + listId, function (err, listData) {
    console.log('Removed list', listId, listData);
});

即使使用了简单的用例，我也会使用localforage，因为它会处理选择最佳存储和任何可能需要的字符串转换的对象进行。

JavaScript：基于模块的Todo列表需要简化

1 个答案: