原生JS开发待办列表时数组存入localStorage为空问题咨询

• 存储内容类型错误：你往tasklist数组中插入的是li DOM节点对象，JSON.stringify()无法序列化DOM元素，序列化后只会得到空对象，存入localStorage的内容自然不符合预期。
• 存储键名不匹配：读取localStorage时的判断条件是if(localStorage.tasklist)，但你实际读写用的key是tasklister，键名不一致导致永远不会走到读取本地存储的分支，每次页面刷新后tasklist都会被初始化为空数组。
• 变量重复声明：多次用var声明tasklist变量，虽然因为var的变量提升特性不会直接报错，但会增加逻辑混乱风险。

调整逻辑，让tasklist只存储纯文本任务数据，页面初始化时遍历tasklist生成对应的DOM节点，修改后的代码如下：

const list = document.getElementById("list");
const toasterClose = document.getElementById("close")
const toast = document.getElementById("liveToast");
const toastInfo = document.getElementById("toast-info");
// 统一存储key，避免拼写错误
const STORAGE_KEY = "tasklister";
let tasklist = [];

// 初始化时读取本地存储
if(localStorage.getItem(STORAGE_KEY)){
    tasklist = JSON.parse(localStorage.getItem(STORAGE_KEY))
    // 读取到数据后渲染到页面
    renderList()
}

// 渲染任务列表函数
function renderList() {
    list.innerHTML = ""
    tasklist.forEach(taskText => {
        createTaskDom(taskText)
    })
}

// 生成单个任务DOM节点函数
function createTaskDom(taskText) {
    const li = document.createElement("li");
    const spanClose = document.createElement("span");
    li.textContent = taskText;

    li.onclick = (e) =>{
        e.currentTarget.classList.toggle("checked")
    }
    
    spanClose.innerHTML = "x"
    spanClose.classList.add("close");
    
    spanClose.onclick = (e) => {
        const index = tasklist.indexOf(taskText);
        tasklist.splice(index,1);
        localStorage.setItem(STORAGE_KEY,JSON.stringify(tasklist));
        e.target.parentElement.remove();
    }
    li.append(spanClose);
    list.append(li);
}

function newElement(){
    const task = document.getElementById("task").value.trim();
    if(task !== ""){
        const info = "Item added to list";
        // 先存纯文本到数组
        tasklist.push(task);
        // 存到本地存储
        localStorage.setItem(STORAGE_KEY,JSON.stringify(tasklist));
        // 生成DOM插入页面
        createTaskDom(task)
        toester(info)
    }else{
        const info = "Empty element cannot be added to the list";
        toester(info);
    }
}

function toester(info){
    toast.classList.remove("hide");
    toast.classList.add("show");
    toastInfo.innerHTML = info;
}

toasterClose.onclick = () =>{
    toast.classList.remove("show");
    toast.classList.add("hide");
}

内容的提问来源于stack exchange，提问作者Mehmet Can BOZ