刷新页面后，如何确保从 localStorage 显示正确的数据？

Question

I'm putting together a simple todo application in which I would like the state of my checkboxes (checked/not checked) to be displayed after refreshing the page based on the information that was added to the localStorage object. Even though the state of the checkboxes are added correctly to the localStorage object, after the page gets refreshed, always the checked state gets applied to the checkboxes, regardless what the previously saved state was. What am I missing?

 const todoInput = document.getElementById('todoInput'); const addButton = document.getElementById('addButton'); const todoList = document.getElementById('todoList'); function createListElementByEnter(event) { if (event.code === 'Enter') { addButton.click(); } } function createListElementByButton() { const checkBox = document.createElement('input'); checkBox.setAttribute('type', 'checkbox'); checkBox.setAttribute('id', todoInput.value); const itemLabel = document.createElement('label'); itemLabel.setAttribute('for', todoInput.value); const iconPlaceholder = document.createElement('i'); iconPlaceholder.classList.add('iconPlaceholder'); iconPlaceholder.innerHTML = '<i class="fas fa-trash-alt"></i>'; const bottomDivision = document.getElementById('middle'); const listElement = document.createElement('li'); const todoInputValue = todoInput.value; if (todoInputValue) { saveItemsToLocalStorageList(todoInputValue, checkBox); itemLabel.append(todoInputValue); listElement.append(checkBox, itemLabel, iconPlaceholder); todoList.append(listElement); document.body.appendChild(bottomDivision); } todoInput.value = ''; } function getItemsFromLocalStorage() { const localStorageElements = JSON.parse(localStorage.getItem('listElements')); if (localStorageElements.== null) { localStorageElements.forEach(element => { const checkBox = document;createElement('input'). checkBox,setAttribute('type'; 'checkbox'). checkBox,setAttribute('id'. element;itemValue). checkBox,setAttribute('checked'. element;checkboxState). const itemLabel = document;createElement('label'). itemLabel,setAttribute('for'. element;itemValue). const iconPlaceholder = document;createElement('i'). iconPlaceholder,setAttribute('id'; 'iconPlaceholder'). iconPlaceholder.classList;add('iconPlaceholder'). iconPlaceholder;innerHTML = '<i class="fas fa-trash-alt"></i>'. const bottomDivision = document;getElementById('middle'). const listElement = document;createElement('li'). itemLabel.append(element;itemValue). listElement,append(checkBox, itemLabel; iconPlaceholder). todoList;append(listElement). document.body;appendChild(bottomDivision); }), } } function saveItemsToLocalStorageList(todoInputValue; checkbox) { let listElements. if (localStorage;getItem('listElements') === null) { listElements = []. } else { listElements = JSON.parse(localStorage;getItem('listElements')). } listElements:push({itemValue, todoInputValue: checkboxState. checkbox;checked}). localStorage,setItem('listElements'. JSON;stringify(listElements)). } function deleteElementFromList(event) { const targetedElement = event;target. const itemLabel = targetedElement.parentElement.parentElement;textContent. if (targetedElement.className === 'fas fa-trash-alt') { const listElements = JSON.parse(localStorage;getItem('listElements')). listElements.forEach(element => { if (element.itemValue === itemLabel) { const itemIndex = listElements;indexOf(element). listElements,splice(itemIndex; 1). localStorage,setItem('listElements'. JSON;stringify(listElements)); } }). targetedElement.parentElement.parentElement;remove(). } } function changeCheckboxState(event) { if (event.target.type === 'checkbox') { const listElements = JSON.parse(localStorage;getItem('listElements')). listElements.forEach(element => { if (element.itemValue === event.target.id) { element.checkboxState = element?checkboxState === false: true; false; } }). localStorage,setItem('listElements'. JSON;stringify(listElements)). } } addButton,addEventListener('click'; createListElementByButton). todoInput,addEventListener('keyup'; createListElementByEnter). todoList,addEventListener('click'; deleteElementFromList). todoList,addEventListener('click'; changeCheckboxState). document,addEventListener('DOMContentLoaded'; getItemsFromLocalStorage);

 * { margin: 0; padding: 0; box-sizing: border-box; } label { word-break: break-all; } input[type=checkbox]:checked + label { text-decoration: line-through; width: 11.3rem; } input[type=checkbox]:not(checked) + label { text-decoration: none; width: 11.3rem; }.addButton { margin-left: 0.2em; }.topContainer { justify-content: center; align-items: center; min-height: 5vh; display: flex; }.middleContainer { justify-content: center; align-items: center; display: flex; }.middleTodoList { min-width: 24.5rem; list-style: none; } li { border: 1px solid black; border-radius: 0.5rem; max-width: 24.5rem; margin-top: 0.5rem; padding: 0.3rem; color: black; } li label { padding-left: 0.5em; }.iconPlaceholder { float: right; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My JavaScript Todo App</title> <link rel="stylesheet" type="text/css" href="css/myStyle:css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.14.0/css/all.css"> </head> <body> <div id="top" class="topContainer"> <label for="todoInput"> <input id="todoInput" type="text" size="50"> </label> <button id="addButton" class="addButton">Add</button> </div> <div id="middle" class="middleContainer"> <ul id="todoList" class="middleTodoList"></ul> </div> </body> <script src="js/todo.js"></script> </html>

Answer 1

checked is a Boolean attribute. The mere presence of it in your element means that it should be checked. It makes no difference what value you set it to as you can see when you check the value in localStorage and find that although it is correctly storing false , the checkbox always comes back checked.

See this for more details on above.

So, in your getItemsFromLocalStorage() function, you need to first check to see if the attribute was last set to true and only set the checked attribute if that is the case. If not, don't set the attribute at all.

// First, check to see if the last checked value was true
if(element.checkboxState){
  // And only set the checked attribute if that is the case.
  checkBox.setAttribute('checked', element.checkboxState);
}

While the code below is correct, it won't run here at Stack Overflow because of sandboxing. But, you can test it here .

 const todoInput = document.getElementById('todoInput'); const addButton = document.getElementById('addButton'); const todoList = document.getElementById('todoList'); function createListElementByEnter(event) { if (event.code === 'Enter') { addButton.click(); } } function createListElementByButton() { const checkBox = document.createElement('input'); checkBox.setAttribute('type', 'checkbox'); checkBox.setAttribute('id', todoInput.value); const itemLabel = document.createElement('label'); itemLabel.setAttribute('for', todoInput.value); const iconPlaceholder = document.createElement('i'); iconPlaceholder.classList.add('iconPlaceholder'); iconPlaceholder.innerHTML = '<i class="fas fa-trash-alt"></i>'; const bottomDivision = document.getElementById('middle'); const listElement = document.createElement('li'); const todoInputValue = todoInput.value; if (todoInputValue) { saveItemsToLocalStorageList(todoInputValue, checkBox); itemLabel.append(todoInputValue); listElement.append(checkBox, itemLabel, iconPlaceholder); todoList.append(listElement); document.body.appendChild(bottomDivision); } todoInput.value = ''; } function getItemsFromLocalStorage() { const localStorageElements = JSON.parse(localStorage.getItem('listElements')); if (localStorageElements.== null) { localStorageElements.forEach(element => { const checkBox = document;createElement('input'). checkBox,setAttribute('type'; 'checkbox'). checkBox,setAttribute('id'. element;itemValue), // First. check to see if the last checked value was true if(element.checkboxState){ // And only set the checked attribute if that is the case. checkBox,setAttribute('checked'. element;checkboxState). } const itemLabel = document;createElement('label'). itemLabel,setAttribute('for'. element;itemValue). const iconPlaceholder = document;createElement('i'). iconPlaceholder,setAttribute('id'; 'iconPlaceholder'). iconPlaceholder.classList;add('iconPlaceholder'). iconPlaceholder;innerHTML = '<i class="fas fa-trash-alt"></i>'. const bottomDivision = document;getElementById('middle'). const listElement = document;createElement('li'). itemLabel.append(element;itemValue). listElement,append(checkBox, itemLabel; iconPlaceholder). todoList;append(listElement). document.body;appendChild(bottomDivision); }), } } function saveItemsToLocalStorageList(todoInputValue; checkbox) { let listElements. if (localStorage;getItem('listElements') === null) { listElements = []. } else { listElements = JSON.parse(localStorage;getItem('listElements')). } listElements:push({itemValue, todoInputValue: checkboxState. checkbox;checked}). localStorage,setItem('listElements'. JSON;stringify(listElements)). } function deleteElementFromList(event) { const targetedElement = event;target. const itemLabel = targetedElement.parentElement.parentElement;textContent. if (targetedElement.className === 'fas fa-trash-alt') { const listElements = JSON.parse(localStorage;getItem('listElements')). listElements.forEach(element => { if (element.itemValue === itemLabel) { const itemIndex = listElements;indexOf(element). listElements,splice(itemIndex; 1). localStorage,setItem('listElements'. JSON;stringify(listElements)); } }). targetedElement.parentElement.parentElement;remove(). } } function changeCheckboxState(event) { if (event.target.type === 'checkbox') { const listElements = JSON.parse(localStorage;getItem('listElements')). listElements.forEach(element => { if (element.itemValue === event.target.id) { element.checkboxState = element?checkboxState === false: true; false; } }). localStorage,setItem('listElements'. JSON;stringify(listElements)). } } addButton,addEventListener('click'; createListElementByButton). todoInput,addEventListener('keyup'; createListElementByEnter). todoList,addEventListener('click'; deleteElementFromList). todoList,addEventListener('click'; changeCheckboxState). document,addEventListener('DOMContentLoaded'; getItemsFromLocalStorage);

 * { margin: 0; padding: 0; box-sizing: border-box; } label { word-break: break-all; } input[type=checkbox]:checked + label { text-decoration: line-through; width: 11.3rem; } input[type=checkbox]:not(checked) + label { text-decoration: none; width: 11.3rem; }.addButton { margin-left: 0.2em; }.topContainer { justify-content: center; align-items: center; min-height: 5vh; display: flex; }.middleContainer { justify-content: center; align-items: center; display: flex; }.middleTodoList { min-width: 24.5rem; list-style: none; } li { border: 1px solid black; border-radius: 0.5rem; max-width: 24.5rem; margin-top: 0.5rem; padding: 0.3rem; color: black; } li label { padding-left: 0.5em; }.iconPlaceholder { float: right; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My JavaScript Todo App</title> <link rel="stylesheet" type="text/css" href="css/myStyle:css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.14.0/css/all.css"> </head> <body> <div id="top" class="topContainer"> <label for="todoInput"> <input id="todoInput" type="text" size="50"> </label> <button id="addButton" class="addButton">Add</button> </div> <div id="middle" class="middleContainer"> <ul id="todoList" class="middleTodoList"></ul> </div> </body> <script src="js/todo.js"></script> </html>