為什么我的本地存儲不起作用，但相同代碼的副本有效

Question

我得到了相同代碼的兩份副本，但略有不同，但似乎第二份代碼不起作用。 我曾嘗試使用 ChatGPT 來識別問題，但是沒有發現任何問題。 但據我所知，它應該有效。 但是，我刷新的所有內容都被刪除了。 我希望按鈕留在那里。

工作代碼：

 const todoList = document.querySelector(".todo-list"); const todoForm = document.querySelector(".add-todo"); const removeList = document.querySelector(".remove-List"); let items = JSON.parse(localStorage.getItem("todoList")) || [ { title: "Write on, 'do not forget to', and press '+' to add", done: false, }, { title: "press 'X' to remove", done: false, }, { title: "search via 'search box'", done: false, }, { title: "filter via 'all'", done: false, }, ]; function addTodo(e) { e.preventDefault(); const title = this.querySelector("[name=item]").value; const todo = { title, done: false, }; items.push(todo); saveTodos(); this.reset(); } function createList(list = [], listTarget) { listTarget.innerHTML = list.map((item, i) => { return `<li> <input type="checkbox" id="todo${i}" data-index="${i}" ${item.done? "checked": ""} /> <label for="todo${i}">${item.title} <span class="font-size:30px" data-index="${i}">X</span> </label> </li>`; }).join(""); } function toggleDone(e) { if (.e.target;matches("input")) return. const el = e;target. const index = el.dataset;index. items[index].done =;items[index];done. saveTodos(). } function removeSingle(e) { if (;e.target;matches("span")) return. const el = e.target; const index = el.dataset,index; items;splice(index. 1). saveTodos(). if (items;length === 0) { removeList.classList,add("hidden"). } } function saveTodos() { localStorage;setItem("todoList", JSON;stringify(items)); createList(items; todoList). showRemoveButton(); } function removeData() { items = [], localStorage;removeItem("todoList"). createList(items. todoList); removeList.classList;add("hidden"). } function showRemoveButton() { if (items.length > 1) return; removeList.classList,remove("hidden"); } todoList.addEventListener("click", toggleDone); todoList.addEventListener("click", removeSingle); todoForm.addEventListener("submit", addTodo); removeList,addEventListener("click"; removeData); // Init list createList(items, todoList);

 <div class="ToDo-container"> <header class="app-header"> <div class="app-header1"> <div class="title"> <h1 class="app-title">ToDo List</h1> </div> <div class="select-button"> <select id="filter"> <option value="all">All</option> <option value="completed">Completed</option> <option value="incomplete">Incomplete</option> </select> </div> </div> <div class="search-header"> <input type="text" id="search" placeholder="Search Todos"> <button type="button" id="search-button" class="btn">Search</button> </div> </header> <section class="app-body"> <div id="toDo"> <ul class="todo-list"></ul> <form class="add-todo"> <input type="text" placeholder="Don't Forget to..." name="item" required /> <input type="submit" value="+" /> </form> </div> <button class="remove-List btn">Remove All</button> </section> </div>

 // Add button function function addButton() { // Prompt for button link and name var link = prompt("Enter the button link:"); var name = prompt("Enter the button name:"); // Create new button element var newButton = document.createElement("button"); newButton.innerHTML = name; newButton.setAttribute("onclick", "location.href='" + link + "'"); // Append new button to button container document.getElementById("button-container").appendChild(newButton); // Save buttons to local storage saveButtons(); } // Remove buttons function function removeButtons() { // Clear button container document.getElementById("button-container").innerHTML = ""; // Save buttons to local storage saveButtons(); } // Save buttons to local storage function saveButtons() { // Get button container HTML var buttonHTML = document.getElementById("button-container").innerHTML; // Save button HTML to local storage localStorage.setItem("buttons", buttonHTML); } // Load buttons from local storage on page load window.onload = function () { // Get button HTML from local storage var buttonHTML = localStorage.getItem("buttons"); // Set button container HTML document.getElementById("button-container").innerHTML = buttonHTML; };

 <div class="shortcuts-container"> <header class="shortcut-header"> <h1 class="shortcut-title">Quick Links</h1> </header> <section class="shortcut-body"> <form id="button-form"> <div id="button-container"></div> <button type="button" onclick="addButton()">Add Button</button> <button type="button" onclick="removeButtons()">Remove Buttons</button> </form> </section> </div>

我需要一些幫助來識別我的代碼中的錯誤

Answer 1

正如您提到的您的“第二個”不起作用，我專注於第二段代碼。 這段代碼添加了一個按鈕，我們需要通過警告框為其提供鏈接和名稱，從技術上講，這應該是一個超鏈接。 我已經使用該按鈕添加了 2 個按鈕並多次刷新頁面，但新添加的按鈕始終保留。 本地存儲工作正常。 另外，查看您的代碼，不存在 localStorage.removeItem() 。 因此 window.onload 工作正常。 但是，如果您在開發工具的控制台中有任何錯誤日志，請提供它們以供進一步調試。 此外，如果有一種方法可以讓您附加一個視頻鏈接，可以看到使用開發工具控制台進行測試的視頻鏈接，這將真正幫助您理解為什么它對您不起作用。