解決localstorage存儲boolean類型值的小坑
localstorage存儲boolean類型值小坑
今天使用localstorage存儲boolean數(shù)據(jù)時，發(fā)現(xiàn)怎么弄頁面上數(shù)據(jù)顯示就是有問題。
后面才發(fā)現(xiàn)，在localstorage中存儲的boolean數(shù)據(jù)都變成了字符串了，才導(dǎo)致的。
所以"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'
}
但是到了新版本，由于需求問題，這個緩存的值改變了，變成了如下結(jié)構(gòu)：
{
username:'px',
myage:'25'
}
這樣就導(dǎo)致了在使用use函數(shù)處理things的時候報錯了，導(dǎo)致后面的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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家整理了一篇關(guān)于js正則表達式簡單校驗方法，有需要的朋友們可以參考下。2021-01-01
Javascript實現(xiàn)base64的加密解密方法示例
下文是base64用javascript寫出來的函數(shù)和方法。非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
詳解JavaScript創(chuàng)建數(shù)組的三種方式
這篇文章主要介紹了JavaScript創(chuàng)建數(shù)組的三種方式：直接聲明,?以對象方式創(chuàng)建數(shù)組和使用?Array.from()?方法創(chuàng)建,并通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-06-06
Firefox中beforeunload事件的實現(xiàn)缺陷淺析
beforeunload 指在頁面卸載前提供的最后一次JS執(zhí)行的機會2012-05-05
js處理json格式的插入、修改、刪除，以及字符串的比較等常用操作，下面有五個示例，感興趣的朋友可以學(xué)習(xí)下2013-09-09
基于bootstrap實現(xiàn)多個下拉框同時搜索功能
這篇文章主要為大家詳細介紹了基于bootstrap實現(xiàn)多個下拉框同時搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本文給大家分享javascript腳本庫編寫的方法，涉及到j(luò)avascript腳本相關(guān)知識，對javascript腳本相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了Javascript刷新窗口方法,以實例形式分析了JavaScript刷新窗口的四種常用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JavaScript實現(xiàn)表格快速變色效果的方法,通過javascript數(shù)組遍歷結(jié)合時間函數(shù)來實現(xiàn)表格快速變色的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Javascript中字符串replace方法的第二個參數(shù)探究
當(dāng)我們要把一段字符串中的某些指定字符替換掉，第一時間想到的就是replace方法，他的用法很簡單，W3school上講的清晰易懂。網(wǎng)上有關(guān)replace的文章也有很多了，那么這篇這里主要聊聊它的第二個參數(shù)，下面來一起看看，注意閱讀本文需要對replace方法有一定了解。2016-12-12