如何从localStorage删除空字符串并解决页面刷新生成空元素问题

先梳理你的代码里的核心问题：

• window.onload里存在语法错误，else分支嵌套混乱，导致逻辑执行异常，刷新时可能错误生成空字符串。
• saveLocalTodos函数没有校验传入的todo，空值会直接存入数组，最终导致页面渲染空元素。
• 页面加载时的存储数据处理逻辑不严谨，没考虑解析失败或数据为空的情况。

修正后的完整代码 #

1. 修复存储函数，从源头拦截空值 #

function saveLocalTodos(todo) {
    // 过滤空字符串、空格组成的无效内容，直接返回不存储
    if (!todo || todo.trim() === "") {
        return;
    }

    let todos;
    const storedTodos = localStorage.getItem('todos');
    // 简化初始化逻辑，有数据就解析，没有就用空数组
    todos = storedTodos ? JSON.parse(storedTodos) : [];

    todos.push(todo);
    localStorage.setItem('todos', JSON.stringify(todos));
}

2. 修复页面加载逻辑，清理无效数据 #

window.onload = function() {
    const storedData = localStorage.getItem("todos");
  
    try {
        if (storedData) {
            const todos = JSON.parse(storedData);
            // 过滤数组里已有的空元素，兼容之前存的无效数据
            const filteredTodos = todos.filter(item => item && item.trim() !== "");
            localStorage.setItem('todos', JSON.stringify(filteredTodos));
            // 这里写你的todo列表渲染逻辑，用filteredTodos来生成元素
        } else {
            // 没有数据时初始化空数组，避免出现空字符串
            localStorage.setItem('todos', JSON.stringify([]));
        }
    } catch (e) {
        // 解析失败说明数据损坏，直接重置为空数组
        localStorage.removeItem('todos');
        localStorage.setItem('todos', JSON.stringify([]));
    }
};

关键修改点说明 #

1. 拦截空值存储：在saveLocalTodos里先校验传入内容，无效值直接不处理，从源头避免空元素进入localStorage。
2. 修复语法与逻辑错误：重构window.onload的逻辑，用try-catch处理JSON解析异常，防止数据损坏导致的异常。
3. 清理已有空元素：加载时过滤数组里的空值，即使之前存了无效数据也会被清理。

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