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

Question

我正在整理一个简单的待办事项应用程序，我希望在根据添加到 localStorage object 的信息刷新页面后显示我的复选框（选中/未选中）的 state。 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. 我错过了什么？

 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的是 Boolean 属性。 仅在元素中存在它就意味着应该对其进行检查。 当您检查localStorage中的值并发现虽然它正确存储false时，您将其设置为什么值并没有区别，但该复选框总是返回选中状态。

有关上面的更多详细信息，请参阅此内容。

因此，在您的getItemsFromLocalStorage() function 中，您需要首先检查该属性是否最后设置为true ，如果是这种情况，则仅设置checked的属性。 如果不是，则根本不要设置该属性。

// 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);
}

虽然下面的代码是正确的，但由于沙盒，它不会在 Stack Overflow 上运行。 但是，您可以在这里进行测试。

 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>