[英]How to make localstorage data stay on page after browser refresh
I am currently creating a todo app that allows the user to input info into the form and after submission, the information shows up as a bulleted list item.我目前正在创建一个待办事项应用程序,允许用户在表单中输入信息,提交后,信息显示为项目符号列表项。 I have made it so that each submission is saved to localStorage, but how can I also maintain the list item on the page after the browser is refreshed?
我已经做到了,每次提交都保存到localStorage,但是如何在浏览器刷新后维护页面上的列表项?
here is my JS这是我的 JS
const submitButton = document.querySelector('#stuff');
const ul = document.querySelector('ul')
const text = document.querySelector('#textbox');
const todoArr = []
// const todoArr = localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')):[]
submitButton.addEventListener('submit', function(e){
e.preventDefault();
if(text.value !== '') {
const addLi = document.createElement('li');
const deleteBtn = document.createElement('button');
deleteBtn.innerText = 'remove';
addLi.innerText = text.value;
addLi.appendChild(deleteBtn);
ul.appendChild(addLi);
// todoArr.push(text.value)
localStorage.setItem('todos', JSON.stringify(todoArr))
text.value = '';
}
})
ul.addEventListener('click', function(e) {
if(e.target.tagName === 'BUTTON') {
e.target.parentElement.remove();
} else if(e.target.tagName === 'LI'){
e.target.classList.toggle('strike-thru')
}
})
Use the code where you create a new list item for your list and put it in a separate function.使用为列表创建新列表项的代码,并将其放入单独的函数中。 Let's call that function
createTodoItem
.让我们调用该函数
createTodoItem
。 When the document loads get the stored todo items from the localStorage
and loop over each value.当文档加载时,从
localStorage
获取存储的待办事项并遍历每个值。 Then with each value call the createTodoItem
and pass the value to create a new item.然后使用每个值调用
createTodoItem
并传递值以创建一个新项目。
const submitButton = document.querySelector('#stuff');
const ul = document.querySelector('ul')
const text = document.querySelector('#textbox');
const storedTodos = localStorage.getItem('todos')
const todoArr = storedTodos !== null ? JSON.parse(storedTodos) : [];
function createTodoItem(value) {
const addLi = document.createElement('li');
const deleteBtn = document.createElement('button');
deleteBtn.innerText = 'remove';
addLi.innerText = value;
addLi.appendChild(deleteBtn);
ul.appendChild(addLi);
}
todoArr.forEach(createTodoItem);
Also modify your submit
listener to use the new function.还要修改您的
submit
侦听器以使用新功能。 Now you've got reusables functions that you can call anywhere in your script.现在您已经获得了可以在脚本中的任何位置调用的可重用函数。
submitButton.addEventListener('submit', function(e){
e.preventDefault();
if(text.value !== '') {
createTodoItem(text.value);
todoArr.push(text.value)
localStorage.setItem('todos', JSON.stringify(todoArr))
text.value = '';
}
})
ul.addEventListener('click', function(e) {
if(e.target.tagName === 'BUTTON') {
e.target.parentElement.remove();
} else if(e.target.tagName === 'LI'){
e.target.classList.toggle('strike-thru')
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.