页面刷新后localStorage值被重置，如何持久化保存所有用户输入内容？

你的代码存在3个核心错误导致刷新后数据重置：

• 每次从localStorage读取已有数据后，直接把existing变量赋值为空数组，直接覆盖了之前存储的所有历史数据
• localStorage只能存储字符串格式内容，你直接把数组类型存入时会被隐式转为普通字符串，下次读取无法直接作为数组操作
• 页面初始化时没有主动从localStorage读取历史数据到全局数组myArr中，刷新后全局数组会被重置为空

修复后的完整实现 #

// 页面初始化时优先从localStorage读取历史输入，无历史数据则初始化为空数组
var myArr = JSON.parse(localStorage.getItem('UserInput') || '[]')

function botResponse(rawText) {
  // 把新的用户输入加入数组
  myArr.push(rawText)
  // 将数组序列化后存入localStorage
  localStorage.setItem('UserInput', JSON.stringify(myArr))

  // 需要读取所有历史输入时，直接用myArr或者从localStorage读取后反序列化都可以
  var allHistoryInput = JSON.parse(localStorage.getItem('UserInput'))
  // 后续你的Bot响应逻辑
  // ...
}

效果验证 #

刷新页面后调用JSON.parse(localStorage.getItem('UserInput'))即可查看所有历史用户输入，不会出现数据丢失问题。

内容的提问来源于stack exchange，提问作者Vee Jay Tan