首页 / JAVASCRIPT / JavaScript中localStorage返回值为null，两个编辑器返回值不一样。

JavaScript中localStorage返回值为null，两个编辑器返回值不一样。

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中localStorage返回值为null，两个编辑器返回值不一样。，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1488字，纯文字阅读大概需要3分钟。

内容图文

------------恢复内容开始------------

问题来源:在将2048游戏发布到github pages时,发现了最高分显示一直为null

技术分享图片
当score变换了,best依旧为null

技术分享图片

技术分享图片
发现不管如何移动localStorge存储的一直都是null,但是在webstorm运行时,没有出错,且能获取到localStorge. vscode和github上面的都是同样的错误,那一定是代码出现了问题.

localStorge

localStorage 中的键值对总是以字符串的形式存储,不受页面刷新的影响,也不会因为关闭窗口,变迁也重启浏览器而丢失,所以我选择它来存储最高分数.

回到设置localStorge的地方发现了错误原因
技术分享图片
因为我最开始就没有设置localStorage,而先去获取这个值，在获取不存在的localstorage时，会返回null。

localStorage.getItem("max");
null
localStorage.setItem("max",null)
undefined
localStorage.getItem("max");
"null"

然后游戏开始时，在 this.maxScore = this.maxScore > c ? this.maxScore : c;
0>null?0:null会返回null，this.maxScore=null,就把null存到了localstorage里
存的时候null就变成了"null"(String),第二次更新最高分数时，c="null",在下一步比较中 "null"转成数字是NaN无法参与比较,
0>null?0:null
33>‘null‘ //false，则max保存的还是null，所以最高分显示一直为null。

测试了下null与其他值的比较
0>null 
false
null<2
true
null<0
false
null>0
false
null==0
false
null<1
true
null<‘a‘
false

webstorm能正常运行,，VSCODE为null

因为我前面一直在完善程序，localStorage早就已经保存了，所以在判断时不影响。因为localStorage 中的键值对总是以字符串的形式存储,不受页面刷新的影响,也不会因为关闭窗口,变迁也重启浏览器而丢失。在webstorm打开的浏览器手动移除localstorage后就会出现相同的问题。也可以在代码中使用removeItem（）移除。

总结

有两种改进方法

1.使用Number（）

在第一次设置localStorage时，将null转为0，
技术分享图片
注意‘null‘字符串是无法转换的
技术分享图片

2.在初始化时检测一下有没有缓存

就开始检测一下有没有缓存，没有就放个0进去.

if(!localstorage.getitem(‘maxscore‘)){
	localstorage.setitem(‘maxscore‘,0)
}

不过两种方法好像都有点点不太优雅？
出现这个问题的原因，是对localStorage的存储已经生存周期不清楚，还有对js的类型转换也有没有注意到。

以后使用localStorage时，定期清除一下。注意js中常见的隐式转换！

原文：https://www.cnblogs.com/My-Coding-Life/p/14786281.html

内容总结

以上是互联网集市为您收集整理的JavaScript中localStorage返回值为null，两个编辑器返回值不一样。全部内容，希望文章能够帮你解决JavaScript中localStorage返回值为null，两个编辑器返回值不一样。所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1180212.html

来源：【匿名】