JavaScript如何在localStorage单个条目中存储两个不同数组

可以在localStorage的单个条目里存储多个不同数组，但你当前的写法是错误的，无法正常存取数据。

错误原因 #

localStorage仅支持存储字符串类型的内容，你直接传入对象作为存储值时，浏览器会自动调用对象的toString()方法，最终存储的是字符串"[object Object]"，完全丢失原始的数组数据，读取时也无法还原你需要的内容。

正确实现方式 #

存储时先用JSON.stringify()将包含两个数组的对象序列化为字符串，读取时再用JSON.parse()反序列化还原为原始对象即可。

存储示例代码 #

// 定义你要存储的包含两个数组的对象
const myPreferences = {
  myFavCars: ["奔驰", "特斯拉", "理想"],
  myDislikedCars: ["某某品牌1", "某某品牌2"]
}
// 序列化后存入localStorage
localStorage.setItem('myPreferences', JSON.stringify(myPreferences))

读取示例代码 #

// 读取存储的字符串
const rawData = localStorage.getItem('myPreferences')
// 反序列化还原对象，兜底处理空数据的情况
const userPreferences = rawData ? JSON.parse(rawData) : { myFavCars: [], myDislikedCars: [] }
// 直接使用两个数组即可
console.log(userPreferences.myFavCars)
console.log(userPreferences.myDislikedCars)

注意事项 #

如果你的数组中存在JSON不支持的类型（比如函数、Symbol、undefined、循环引用结构），序列化时对应内容会丢失，这类场景需要你自行实现自定义序列化逻辑。

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