如何为HTML/JavaScript待办清单实现LocalStorage数据持久化？

我用HTML和JavaScript写了一个简易待办清单，但每次刷新页面后列表项都会丢失。我知道LocalStorage能解决这个问题，也成功把数据存进了LocalStorage，但不知道怎么用localStorage.getItem()读取数据并渲染成列表项。以下是我的原始代码和尝试后的代码，希望能得到实现方法或提示。

原始HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>ToDo list</h1>
    <div class="addNewWork">
        <input type="text" placeholder="Enter new work">
        <button>Enter</button>
    </div>
    <ul>
        <li class="random">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

原始JavaScript代码 #

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");

function inputValueCheck() {
    return input.value.length;
};

function addElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li)
    input.value = "";
};

function mouseClickEvent() {
    if (inputValueCheck() > 0) {
        addElement();
    };
};

function keypressEvent(event) {
    if (inputValueCheck() > 0 && event.code === "Enter") {
        addElement();
    };
};

button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);

尝试后的JavaScript代码 #

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
var workItems = [];

function inputValueCheck() {
    return input.value.length;
};

function saveDataInLocalStorage() {
    workItems.push(input.value);
    localStorage.setItem("items", JSON.stringify(workItems));
}

function addElement() {
    saveDataInLocalStorage();
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li)
    input.value = "";
};

function mouseClickEvent() {
    if (inputValueCheck() > 0) {
        addElement();
    };
};

function keypressEvent(event) {
    if (inputValueCheck() > 0 && event.code === "Enter") {
        addElement();
    };
};

button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);

解决方法：完整持久化实现代码 #

修改后的JavaScript代码 #

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
// 从LocalStorage读取数据，无数据则初始化空数组
var workItems = JSON.parse(localStorage.getItem("items")) || [];

// 通用渲染函数：根据数组内容生成列表项
function renderItems() {
    ul.innerHTML = ""; // 清空现有列表，避免重复渲染
    workItems.forEach(item => {
        const li = document.createElement("li");
        li.textContent = item;
        ul.appendChild(li);
    });
}

function inputValueCheck() {
    return input.value.trim().length; // 过滤空字符串
};

function saveDataInLocalStorage() {
    localStorage.setItem("items", JSON.stringify(workItems));
}

function addElement() {
    const newItem = input.value.trim();
    if (newItem) {
        workItems.push(newItem);
        saveDataInLocalStorage();
        renderItems(); // 添加后刷新列表
        input.value = "";
    }
};

function mouseClickEvent() {
    if (inputValueCheck() > 0) {
        addElement();
    };
};

function keypressEvent(event) {
    if (inputValueCheck() > 0 && event.code === "Enter") {
        addElement();
    };
};

// 页面加载完成后初始化列表
window.addEventListener("load", () => {
    // 若LocalStorage为空，先保存页面初始的待办项
    if (workItems.length === 0) {
        document.querySelectorAll("li").forEach(li => {
            workItems.push(li.textContent);
        });
        saveDataInLocalStorage();
    }
    renderItems();
});

button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);

关键实现点说明 #

• 读取LocalStorage数据：用JSON.parse(localStorage.getItem("items")) || []处理，确保即使localStorage无数据，数组也不会为null。
• 统一渲染逻辑：封装renderItems函数，负责清空列表并重新生成所有项，无论是初始化还是新增项都能调用，避免代码重复。
• 初始数据持久化：页面首次加载时，如果localStorage为空，自动把HTML里的默认待办项存入数组和localStorage，保证初始内容也不会丢失。
• 输入优化：添加trim()过滤输入的空字符串，避免存入无效内容。

内容的提问来源于stack exchange，提问作者Nabil Ahmed