我到目前为止已编码,但不知道如何使用本地存储,因此在重新加载/刷新时,我不必在浏览器中丢失待办事项列表。
这是我已经使用savetodos功能将项目设置为本地存储的代码
var form = document.querySelector('form')
var ul = document.querySelector('ul')
var button = document.querySelector('#button');
var input =
document.querySelector('#item');
var clear =
document.querySelector('#clear');
var savedToDos = []
//this makes list item
var liMaker = text => {
var li = document.createElement('li');
li.textContent = text;
ul.insertBefore(li, ul.childNodes[0])
}
form.addEventListener('submit', function(e) {
e.preventDefault()
liMaker(input.value)
input.value = ''; }
);
clear.addEventListener('click', remove);
//function remove to remove list item
function remove(){
saveToDos();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
}
function saveToDos() {
var items =
ul.getElementsByTagName("li");
for (var i = 0; i < items.length; ++i) {
savedToDos.push(
items[i].innerHTML);
}
localStorage.setItem('savedValues', savedToDos);
}
<div class='container'>
<h1> New todo list</h1>
<form>
<input type='text' id='item'
required>
<ul id="myList"></ul>
<button id='button'>add</
button> </form>
<button id="clear">Clear</
button>
</div>
答案 0 :(得分:1)
您可以按以下方式处理它:
这可能是这样的:
<div className='container'>
<h1> New todo list</h1>
<form>
<input type='text' id='item' required>
<ul id="myList"></ul>
<button id='button'>add</button>
</form>
<button id="clear">Clear</button>
</div>
<script>
var form = document.querySelector('form')
var ul = document.querySelector('ul')
var button = document.querySelector('#button');
var input = document.querySelector('#item');
var clear = document.querySelector('#clear');
var savedToDos = []
//this makes list item
var liMaker = text => {
var li = document.createElement('li');
li.textContent = text;
ul.insertBefore(li, ul.childNodes[0])
}
form.addEventListener('submit', function(e) {
e.preventDefault()
liMaker(input.value)
saveToDo(input.value)
input.value = '';
});
clear.addEventListener('click', remove);
//function remove to remove list item
function remove(){
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
localStorage.removeItem('savedValues')
}
function saveToDo(item) {
var storedItems = localStorage.getItem('savedValues');
storedItems = storedItems ? JSON.parse(storedItems) : [];
storedItems.push(item);
localStorage.setItem('savedValues', JSON.stringify(storedItems))
}
// populate the list on page load from localStorage
var storedItems = localStorage.getItem('savedValues');
if (storedItems) {
JSON.parse(storedItems).forEach(function(item) {
liMaker(item)
})
}
</script>