如何在本地存储待办事项清单？

Question

I am currently working on making the to-do list app shown [here][1] work better. 我目前正在努力使[此处] [1]所示的待办事项列表应用程序更好地工作。 I have done things like change the font, but want to use Javascript cookies to make it so that the user's to-dos are properly saved and still there when the page is reopened. 我已经做了一些更改字体之类的事情，但是想使用Javascript cookie来做到这一点，以便正确保存用户的待办事项，并在重新打开页面时仍然存在。

All I need now (which I can't seem to get the idea of how to do) is the part where 1. the browser saves the data and 2. where the browser retrieves the data. 我现在所需要的（我似乎不知道该怎么做的意思）就是1.浏览器保存数据和2.浏览器检索数据的部分。

Any help would be greatly appreciated. 任何帮助将不胜感激。

<body>
        <!--To-Do Header, where you add tasks-->
        <div id="myDIV" class="header">
            <!--Change one: Make to-do list name different-->
            <h2>To-Do</h2>
            <input type="text" id="myInput" placeholder="Title..." style="padding-bottom: 20px;">
            <span onclick="newElement();" class="addBtn">Add</span>
        </div>
        <!--To-do list-->
        <ul id="myUL">

        </ul>

 var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); } // Click on a close button to hide the current list item var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; }; } // Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); // Create a new list item when clicking on the "Add" button function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something to create a task."); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; }; } }

Answer 1

Using local storage, as it lasts longer then cookies: 使用本地存储，因为它的持续时间比cookie长：

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

EDIT: @MichaelMior pointed out that local storage may not last longer then cookies, but the cookies are sent with browser requests so it's unnecessary in this case. 编辑：@MichaelMior指出本地存储的持续时间可能不会比cookie长，但cookie是与浏览器请求一起发送的，因此在这种情况下是不必要的。

Answer 2

You want to store the text content, so you need to get them first 您要存储文本内容，因此需要先获取它们

var values=[...document.getElementsByTagName("li")].map(el=>el.textContent);

Now you can store this array 现在您可以存储此数组

localStorage.setItem("todos",values);

If the page is loaded, add it back to the page: 如果页面已加载，请将其添加回页面：

localStorage.getItem("todos").forEach(fumction(value){
 //create elem
 elem.textContent=value;
 });

You could also store a HTML collection, but i wouldnt, storing just the text is.much easier... 您还可以存储一个HTML集合，但是我不愿意，仅存储文本非常容易...

Answer 3

Here is a quick example where I store an item and give it a name in localStorage called input . 这是一个简单的示例，其中我存储了一个项目并在localStorage中给它命名为input 。 This shows how to setItem() and getItem() . 这显示了如何setItem()和getItem() 。

Looks like this example doesn't work in the SO sandbox, so here's a codepen - http://codepen.io/anon/pen/KaNZxX 貌似这个示例中的SO沙箱不工作，所以这里是一个codepen - http://codepen.io/anon/pen/KaNZxX

 $('button').on('click',function() { localStorage.setItem("input", $('input').val()); fetch(); }); function fetch() { $('#storage').html(localStorage.getItem('input')); } fetch(); // fetch on load

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <button>add</button> <div id="storage"></div>

如何在本地存储待办事项清单？

问题描述

3 个解决方案

解决方案1
2 2017-01-17 17:59:40

解决方案2
1 2017-01-17 18:07:00

解决方案3
0 2017-01-17 18:09:56

如何在本地存储待办事项清单？

问题描述

3 个解决方案

解决方案1 2 2017-01-17 17:59:40

解决方案2 1 2017-01-17 18:07:00

解决方案3 0 2017-01-17 18:09:56

解决方案1
2 2017-01-17 17:59:40

解决方案2
1 2017-01-17 18:07:00

解决方案3
0 2017-01-17 18:09:56