解決localstorage存儲boolean類型值的小坑

更新時間：2021年06月04日 09:42:16 作者：梧桐芊羽

這篇文章主要介紹了解決localstorage存儲boolean類型值的小坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

localstorage存儲boolean類型值小坑

今天使用localstorage存儲boolean數(shù)據(jù)時，發(fā)現(xiàn)怎么弄頁面上數(shù)據(jù)顯示就是有問題。

后面才發(fā)現(xiàn)，在localstorage中存儲的boolean數(shù)據(jù)都變成了字符串了，才導致的。

所以"true"=true及"false"==false,“true”==false顯示都為false。

localstorage使用不嚴謹之坑

上線新版本后，發(fā)現(xiàn)極個別“老”用戶在微信瀏覽器中無法打開我們網(wǎng)站的首頁。在經(jīng)過一番線上文件代理替

換后，終于發(fā)現(xiàn)了問題所在。

問題代碼段：

if(localstorage.getItem("things")){
    var things = localstorage.getItem("things");
    use(things);
    //緩存用一次就刪除
    localstorage.removeItem('things');
}else{
    use(newData);
}

這段代碼乍一看沒什么問題，但是有隱患。在老版本中，localstorage中存的things內(nèi)容如下：

{
    name:'px',
    age:'25'
}

但是到了新版本，由于需求問題，這個緩存的值改變了，變成了如下結構：

{
    username:'px',
    myage:'25'
}

這樣就導致了在使用use函數(shù)處理things的時候報錯了，導致后面的removeItem永遠不執(zhí)行，所以緩存的這段數(shù)據(jù)在代碼中永遠不被清除，use函數(shù)一直使用舊的數(shù)據(jù)進行渲染，這樣就一直報錯，永遠無法使用新數(shù)據(jù)。

這里有兩點需要改進的

* 給緩存加版本號 * 用變量讀取緩存后，立刻清除緩存

優(yōu)化后的代碼如下：

//先判斷緩存版本號
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);
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: