如何将带指定ID的条目存储到Local Storage并正确读取渲染

核心问题根因 #

1. 未做本地存储空值兜底：首次访问时localStorage.getItem('storedPosts')会返回null，JSON.parse(null)得到的是空值而非空数组，后续读取属性时直接报错
2. 存储逻辑顺序错误：你当前是将仅包含最新1条帖子的数组直接覆盖写入localStorage，旧数据会被直接清空，这也是之前只能保存1条帖子的原因
3. 冗余的数组合并逻辑：无需额外拼接两个数组，直接基于本地已有的帖子数组做更新即可

修复后完整实现代码 #

1. 初始化帖子数组（加空值兜底） #

// 读取本地已有帖子，不存在则默认是空数组
let storedPosts = JSON.parse(localStorage.getItem('storedPosts')) || []

2. 新增帖子逻辑 #

// 生成唯一ID，用时间戳比随机数更稳妥，不会出现ID重复问题
let newId = Date.now()
let postContents = {
    ID : newId,
    text: value // 这里的value为你获取的帖子输入内容
}
// 新帖子直接加入已有数组
storedPosts.push(postContents)

3. 持久化存储到localStorage #

let savePosts = () => {
    localStorage.setItem('storedPosts', JSON.stringify(storedPosts))
}
// 新增帖子后调用保存方法
savePosts()

4. 帖子渲染逻辑 #

let uploadStoredPosts = () => {
    // 渲染前清空容器，避免重复渲染旧帖子
    $post_place.innerHTML = ''
    for (let i = 0; i < storedPosts.length; i++) {
        let post = document.createElement('div')
        // 给元素绑定帖子ID，后续做删除功能时可以直接取ID匹配
        post.dataset.postId = storedPosts[i].ID
        $post_place.appendChild(post)

        let text = document.createElement('p')
        post.appendChild(text)
        text.textContent = storedPosts[i].text
    }
}
// 页面加载、新增帖子完成后都调用该方法渲染
uploadStoredPosts()

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