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

JavaScript: Module based Todo list needs simplification

本文关键字：列表 Todo 于模块 模块 JavaScript      更新时间：2023-09-26

这是我基于模块模式的待办事项列表，运行良好，只想知道两件事。

这个代码还能简化吗？一旦我添加了一个列表，如果我刷新页面，这些列表就会消失，但我的要求是，当我使用"删除列表"时，这些列表会被删除。我该如何修改？有什么建议吗？

<!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>

这是您关于如何保留列表直到要删除列表的问题的答案。

你为什么不看看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的localforge库，但您需要查看promise或callback。最简单的方法是使用回调。

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

即使使用您似乎拥有的简单用例，我也会使用localforge，因为它将处理选择最佳存储和可能需要执行的任何对象到字符串的转换。

相关文章：