JavaScript中localStorage返回值为null,两个编辑器返回值不一样。
作者:互联网
------------恢复内容开始------------
问题来源:在将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中常见的隐式转换!
标签:false,localStorge,JavaScript,localStorage,localstorage,返回值,null,maxScore 来源: https://www.cnblogs.com/My-Coding-Life/p/14786281.html