如何在LocalStorage中持久化用户数据？哪条存储命令更正确？

核心结论 #

第一段代码 localStorage.setItem('bas',JSON.stringify(basketList)); 是专门用于数据存储的操作，完全匹配你的存储需求；第二段代码负责读取数据，二者作用不同。

详细说明 #

LocalStorage仅支持存储字符串类型数据，如果你要保存对象、数组这类复杂结构（比如示例里的购物车列表basketList），必须先用JSON.stringify()把数据转成JSON字符串，再通过localStorage.setItem(key, value)方法存入LocalStorage。

要实现页面刷新后数据不丢失，需要完整的读写流程：

1. 存储数据：当用户数据（比如购物车内容）更新时，执行存储代码

   // 将basketList转为JSON字符串，存入LocalStorage，键名为'bas'
   localStorage.setItem('bas', JSON.stringify(basketList));
   

2. 恢复数据：页面加载或刷新时，读取存储的数据并还原

   // 读取键名为'bas'的内容，转换回原数据格式
   const savedBasket = JSON.parse(localStorage.getItem('bas'));
   // 有保存数据就用它，无数据则初始化空数组
   const basketList = savedBasket || [];
   

两段代码的分工 #

• localStorage.setItem(...)：负责将数据写入/更新到LocalStorage，是存储操作的核心代码
• JSON.parse(localStorage.getItem(...))：负责从LocalStorage读取并解析数据，是恢复数据的必要步骤

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