JS数组刷新页面后数据丢失 如何实现前端数据持久化存储

你现在的笑话数组存在页面运行内存里，刷新页面内存被回收，新增的内容自然就丢了。纯静态前端项目不需要搭后端，直接用浏览器自带的localStorage做本地持久化就能解决问题。

核心修改逻辑 #

• 页面首次加载时，优先从localStorage读取之前存储的笑话列表；如果是用户第一次打开页面，本地没有存储数据，就用你写好的默认笑话数组初始化
• 每次用户提交新笑话、更新数组之后，立刻把最新的数组转成字符串存到localStorage里

localStorage存储的数据除非用户手动清除浏览器缓存，否则不会因为页面刷新、关闭浏览器丢失，完全满足个人使用的持久化需求

修改后可直接运行的JS代码 #

替换你原来的script.js内容即可：

const output = document.getElementById("joke")
// 固定存储的key名，避免拼写错误导致读不到数据
const STORAGE_KEY = 'douglas_dad_jokes'
// 初始化笑话数组：优先读本地存储，无数据则用默认预设值
let jokes = JSON.parse(localStorage.getItem(STORAGE_KEY)) || ["test123", "test1235", "testting 1"]

// 统一封装存储方法，每次更新数组后调用
function saveJokesToStorage() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(jokes))
}

function inputJoke() {
    const inputEle = document.getElementById('box')
    const boxvalue = inputEle.value.trim()
    // 过滤空内容，避免存入无效笑话
    if (!boxvalue) return false
    jokes.push(boxvalue)
    // 提交后清空输入框
    inputEle.value = ''
    // 存最新数据到本地
    saveJokesToStorage()
    console.log(jokes)
    return false
}

function randomChoice(){
    return jokes[Math.floor(Math.random() * jokes.length)]
}

function jokeText(){
    output.innerHTML = randomChoice()
}

// 页面加载完成后默认展示一个随机笑话，不用用户手动点按钮
window.addEventListener('DOMContentLoaded', jokeText)

补充说明 #

• localStorage只能存储字符串类型数据，所以存数组的时候需要用JSON.stringify()把数组转成JSON字符串，读取的时候再用JSON.parse()转回数组格式
• 这种方式存储的数据是和用户当前使用的浏览器绑定的，不同用户、不同浏览器之间的笑话库不互通。如果后续要做所有访客共享的公共笑话库，再额外开发后端接口+数据库即可，当前个人使用场景下localStorage是成本最低的实现方案
• 代码里额外加了空输入过滤、提交后清空输入框、页面加载默认展示笑话的小优化，不影响原有功能逻辑

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