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