解決localstorage存儲(chǔ)boolean類型值的小坑
localstorage存儲(chǔ)boolean類型值小坑
今天使用localstorage存儲(chǔ)boolean數(shù)據(jù)時(shí),發(fā)現(xiàn)怎么弄頁(yè)面上數(shù)據(jù)顯示就是有問(wèn)題。
后面才發(fā)現(xiàn),在localstorage中存儲(chǔ)的boolean數(shù)據(jù)都變成了字符串了,才導(dǎo)致的。
所以"true"=true及"false"==false,“true”==false顯示都為false。
localstorage使用不嚴(yán)謹(jǐn)之坑
上線新版本后,發(fā)現(xiàn)極個(gè)別“老”用戶在微信瀏覽器中無(wú)法打開(kāi)我們網(wǎng)站的首頁(yè)。在經(jīng)過(guò)一番線上文件代理替
換后,終于發(fā)現(xiàn)了問(wèn)題所在。
問(wèn)題代碼段:
if(localstorage.getItem("things")){
var things = localstorage.getItem("things");
use(things);
//緩存用一次就刪除
localstorage.removeItem('things');
}else{
use(newData);
}
這段代碼乍一看沒(méi)什么問(wèn)題,但是有隱患。在老版本中,localstorage中存的things內(nèi)容如下:
{
name:'px',
age:'25'
}
但是到了新版本,由于需求問(wèn)題,這個(gè)緩存的值改變了,變成了如下結(jié)構(gòu):
{
username:'px',
myage:'25'
}
這樣就導(dǎo)致了在使用use函數(shù)處理things的時(shí)候報(bào)錯(cuò)了,導(dǎo)致后面的removeItem永遠(yuǎn)不執(zhí)行,所以緩存的這段數(shù)據(jù)在代碼中永遠(yuǎn)不被清除,use函數(shù)一直使用舊的數(shù)據(jù)進(jìn)行渲染,這樣就一直報(bào)錯(cuò),永遠(yuǎn)無(wú)法使用新數(shù)據(jù)。
這里有兩點(diǎn)需要改進(jìn)的
* 給緩存加版本號(hào) * 用變量讀取緩存后,立刻清除緩存
優(yōu)化后的代碼如下:
//先判斷緩存版本號(hào)
if(localstorage.getItem("version") == curVersion){
if(localstorage.getItem("things")){
var things = localstorage.getItem("things");
//立刻清除
localstorage.removeItem('things');
use(things);
}else{
use(newData);
}
}else{
localstorage.removeItem('things');
use(newData);
}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript比較當(dāng)前時(shí)間是否在指定時(shí)間段內(nèi)的方法
這篇文章主要介紹了JavaScript比較當(dāng)前時(shí)間是否在指定時(shí)間段內(nèi)的方法,涉及javascript時(shí)間與字符串的轉(zhuǎn)換及比較操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
JavaScript 在各個(gè)瀏覽器中執(zhí)行的耐性
經(jīng)常會(huì)遇到這樣一個(gè)情況:瀏覽器彈出對(duì)話框,提示腳本運(yùn)行時(shí)間過(guò)長(zhǎng),詢問(wèn)“停止”還是“繼續(xù)”。那究竟各個(gè)瀏覽器是如何判斷在什么時(shí)候才彈出此對(duì)話框呢?2009-04-04
JavaScript實(shí)現(xiàn)圓形進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圓形進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
js實(shí)現(xiàn)的GridView即表頭固定表體有滾動(dòng)條且可滾動(dòng)
實(shí)現(xiàn)GridView,表頭固定,表體有滾動(dòng)條且可滾動(dòng),下面有個(gè)不錯(cuò)的示例,希望對(duì)大家有所幫助2014-02-02
JS實(shí)現(xiàn)屏蔽網(wǎng)頁(yè)右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】
這篇文章主要介紹了JS實(shí)現(xiàn)屏蔽網(wǎng)頁(yè)右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實(shí)例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下2016-09-09
JavaScript callback回調(diào)函數(shù)用法實(shí)例分析
這篇文章主要介紹了JavaScript callback回調(diào)函數(shù)用法,結(jié)合實(shí)例形式分析了callback回調(diào)函數(shù)的概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用技巧,需要的朋友可以參考下2018-05-05

