如何做待办事项清单的本地存储？ [英] How to do local storage for to-do list?
问题描述
我目前正在努力使待办事项清单应用显示[这里] [1]更好地工作。我已经做了一些改变字体的事情，但是想要使用Javascript cookies来使用户的待办事项能够正确保存，并且在页面重新打开时仍然保留在那里。
现在我需要的所有东西（我似乎无法理解如何去做）是1.浏览器保存数据的地方2.其中浏览器检索数据。
任何帮助将不胜感激。
<身体GT;
<！ - 待办事项标题，您添加任务的地方 - >
< div id =myDIVclass =header>
<！ - 更改一个：使待办事项列表名称不同 - >
< h2>待办事项< / h2>
< input type =textid =myInputplaceholder =Title ...style =padding-bottom：20px;>
< span onclick =newElement（）;类= addBtn >添加< /跨度>
< / div>
<！ - 待办事项 - >
< 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）;} //点击关闭按钮隐藏当前列表itemvar 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; };} //点击列表时添加一个checked符号itemvar list = document.querySelector（'ul'）; list.addEventListener（'click'，function（ev）{if（ev.target.tagName == ='LI'）{ev.target.classList.toggle（'checked'）;}}，false）; //当点击添加按钮时，创建一个新的列表项newElement（）{var li = document.createElement （ 里）; var inputValue = document.getElementById（myInput）.value; var t = document.createTextNode（inputValue）; li.appendChild（T）; if（inputValue ===''）{alert（你必须写一些东西来创建任务。）; } 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（跨度）; for（i = 0; i< close.length; i ++）{close [i] .onclick = function（）{var div = this.parentElement; div.style.display =none; }; }}
使用使用本地存储，因为它持续时间更长，然后cookie：
//存储
localStorage.setItem（lastname，史密斯）;
//检索
document.getElementById（result）。innerHTML = localStorage.getItem（lastname）;
https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
编辑：@MichaelMior指出，本地存储可能不会持续更长的时间，然后cookie会与浏览器请求一起发送，因此在这种情况下不需要。
I am currently working on making the to-do list app shown [here][1] work better. 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.
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.
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("\u00D7");
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("\u00D7");
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";
};
}
}
Using local storage, as it lasts longer then cookies:
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
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.
这篇关于如何做待办事项清单的本地存储？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
