------------恢復內容開始------------
問題來源:在將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中常見的隱式轉換！