如何用jQuery从localStorage读取数据并追加到DOM元素？

嘿，我碰到过类似的问题，大概率是localStorage的存储格式和DOM初始化逻辑没处理好，我给你梳理下解决方案：

核心问题分析 #

localStorage只能存储字符串类型的数据，如果你直接把数组或者对象存进去，会被强制转成[object Object]这种无效格式，读取时自然没法正确解析。另外，页面刷新后DOM会重置，所以必须在页面加载时主动从localStorage读取数据并渲染到ul里。

分步解决代码示例 #

1. HTML结构（假设你的基础结构是这样） #

<input type="text" id="inputBox">
<button id="addBtn">添加</button>
<ul id="list"></ul>

2. JavaScript逻辑 #

// 获取DOM元素
const inputBox = document.getElementById('inputBox');
const addBtn = document.getElementById('addBtn');
const list = document.getElementById('list');

// 初始化：页面加载时渲染localStorage中的数据
function renderList() {
    // 读取localStorage，没有数据则初始化空数组
    const storedData = localStorage.getItem('userInputs');
    const inputs = storedData ? JSON.parse(storedData) : [];
    
    // 清空现有列表（避免重复渲染）
    list.innerHTML = '';
    
    // 遍历数据生成li元素
    inputs.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        list.appendChild(li);
    });
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', renderList);

// 点击添加按钮的逻辑
addBtn.addEventListener('click', () => {
    const inputValue = inputBox.value.trim();
    if (!inputValue) return; // 空输入不处理
    
    // 读取现有数据
    const storedData = localStorage.getItem('userInputs');
    const inputs = storedData ? JSON.parse(storedData) : [];
    
    // 添加新数据
    inputs.push(inputValue);
    
    // 存回localStorage（必须转成字符串）
    localStorage.setItem('userInputs', JSON.stringify(inputs));
    
    // 追加新的li到ul（或者调用renderList()重新渲染，两种方式都可以）
    const newLi = document.createElement('li');
    newLi.textContent = inputValue;
    list.appendChild(newLi);
    
    // 清空输入框
    inputBox.value = '';
});

关键注意点 #

• 存储时必须用JSON.stringify()把数组转成字符串，读取时用JSON.parse()转成数组，这是避免数据格式错误的核心。
• 页面初始化时一定要调用renderList()，否则刷新后localStorage里的数据不会自动显示到DOM中。
• 点击添加时，要先读取现有数据再追加，而不是直接覆盖，这样才能保证历史数据不丢失。

如果你的原有代码里没有做这些处理，就会出现“直接追加刷新消失，读取localStorage显示异常”的问题，试试上面的逻辑应该就能解决啦！

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