Javascript 如何使本地存储数据在浏览器刷新后保留在页面上
我目前正在创建一个todo应用程序,允许用户在表单中输入信息,提交后,信息显示为项目符号列表项。我这样做是为了每次提交都保存到localStorage,但是在刷新浏览器后,如何在页面上维护列表项呢 这是我的JSJavascript 如何使本地存储数据在浏览器刷新后保留在页面上,javascript,Javascript,我目前正在创建一个todo应用程序,允许用户在表单中输入信息,提交后,信息显示为项目符号列表项。我这样做是为了每次提交都保存到localStorage,但是在刷新浏览器后,如何在页面上维护列表项呢 这是我的JS const submitButton = document.querySelector('#stuff'); const ul = document.querySelector('ul') const text = document.querySelector('#textbox');
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')
}
})
使用为列表创建新列表项并将其放入单独函数中的代码。让我们调用该函数
createTodoItem
。加载文档时,从localStorage
获取存储的todo项,并循环每个值。然后使用每个值调用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);
同时修改submit
侦听器以使用新功能。现在,您已经拥有了可重用的函数,可以在脚本中的任何位置调用这些函数
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')
}
})