求助:localStorage.getItem()始终返回同一旧值问题排查
LocalStorage getItem始终返回旧值的排查方案
针对你遇到的问题,结合代码给出几个排查方向和调试步骤:
一、先确认写入与读取的原始值是否匹配
LocalStorage是同步操作,setItem执行完成后立即读取应该能拿到最新值。先在代码里加调试日志,验证这一点:
修改generateSave函数,验证写入结果
function generateSave() { let oreSave = objMap(oreDict, (i) => {return [!i.discovered, (i.amt * (i.name.charCodeAt(0) - 96))]}) let itemSave = objMap(itemDict, (i) => {return i.amt * (i.name.charCodeAt(0) - 96)}) let save = {"ores": oreSave, "money": money, "items": itemSave} let encryptedSave = btoa(JSON.stringify(save)) localStorage.setItem("save", encryptedSave) // 调试:写入后立即读取对比 const storedValue = localStorage.getItem("save") console.log("生成的加密值:", encryptedSave) console.log("存储后读取值:", storedValue) console.log("值是否一致:", encryptedSave === storedValue) }
修改loadSave函数,验证读取的原始值
function loadSave() { const rawStoredValue = localStorage.getItem("save") console.log("loadSave读取的原始值:", rawStoredValue) let decryptedSave = JSON.parse(atob(rawStoredValue)) // ... 后续赋值逻辑 }
运行后看控制台日志:
- 如果
generateSave里两个值一致,说明写入操作没问题; - 如果
loadSave读取的rawStoredValue和generateSave里的encryptedSave不一致,说明读取时拿到的是旧数据,要排查页面上下文(比如是否在iframe、隐身模式与正常模式的存储隔离,或者有浏览器扩展干扰)。
二、检查loadSave的赋值逻辑
如果读取的原始值是新的,但页面显示还是旧数据,大概率是// ...部分的赋值逻辑有问题:
- 确认是否把
decryptedSave.ores正确映射回oreDict,包括discovered和amt的反向计算(因为你存储时做了amt * (name.charCodeAt(0)-96),读取时要除以这个值还原); - 确认
money、itemDict的赋值是否覆盖了全局变量,没有被其他代码覆盖或缓存。
三、排除外部干扰
- 关闭所有浏览器扩展,或用隐身模式测试,排除扩展修改LocalStorage的可能;
- 检查是否有其他代码也在操作
localStorage.getItem("save")或setItem("save"),比如自动保存逻辑、其他功能模块的写入操作,导致新值被覆盖。
四、验证objMap函数的正确性
虽然你说开发者工具里写入的是正确值,但还是要确认objMap是否正确遍历对象并生成新的结构,比如是否存在引用原对象属性而非生成新值的情况,导致序列化后的数据和旧值重复。
内容的提问来源于stack exchange,提问作者sc3d
相关产品推荐
相关产品推荐

