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

问题来源:在将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中常见的隐式转换！