瀏覽器刷新后如何使本地存儲數據留在頁面上

Question

我目前正在創建一個待辦事項應用程序，允許用戶在表單中輸入信息，提交后，信息顯示為項目符號列表項。 我已經做到了，每次提交都保存到localStorage，但是如何在瀏覽器刷新后維護頁面上的列表項？

這是我的 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')
    }
})

Answer 1

使用為列表創建新列表項的代碼，並將其放入單獨的函數中。 讓我們調用該函數createTodoItem 。 當文檔加載時，從localStorage獲取存儲的待辦事項並遍歷每個值。 然后使用每個值調用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')
    }
})