vue儲(chǔ)存storage時(shí)含有布爾值的解決方案
今天遇到一個(gè)問(wèn)題,需要將后臺(tái)返回的true和false存到storage中去,然后用儲(chǔ)存的這個(gè)值進(jìn)行邏輯判斷,但是一直判斷都是錯(cuò)誤的,后面查閱了一下資料才發(fā)現(xiàn)
在localstorage中儲(chǔ)存數(shù)據(jù)的時(shí)候,儲(chǔ)存的boolean值都會(huì)變成字符串,而不是剛開(kāi)始儲(chǔ)存進(jìn)去的boolean值
都變成了字符串
那么怎么解決呢?
一:前端進(jìn)行一次轉(zhuǎn)化if (localStorage.getItem(’布爾值’) == ’true’) {// 重新賦值為新的值’布爾值’ = true}
或者是在儲(chǔ)存的時(shí)候,就不要用boolean值進(jìn)行存儲(chǔ),用數(shù)字或者是其他的進(jìn)行代替,然后判斷就是了
// 后臺(tái)返回的值是trueif (true) {localStorage.setItem(’布爾值’, 1)}else {localStorage.setItem(’布爾值’, 2)}// 需要用的時(shí)候if (localStorage.getItem(’布爾值’) == 1) {// 處理事件}else {// 處理事件}localstorage存儲(chǔ)布爾值的一次坑問(wèn)題描述
最近工作中使用localstorage存貯一些共享的變量,結(jié)果在存貯布爾值的時(shí)候遇到了很多問(wèn)題;
一般情況下,存取如下:
localstorage.setItem(’key’, value);//存localstorage.getItem(’key’);//取
但是在存儲(chǔ)布爾型數(shù)據(jù)時(shí),由于localstorage中存儲(chǔ)的boolean數(shù)據(jù)都變成了字符串,故'true'=true及'false'==false,“true”==false顯示都為false,導(dǎo)致嘗試了很多次都沒(méi)有找到問(wèn)題所在;
最終解決方法當(dāng) localstorage 或 sessionstorage 存儲(chǔ)布爾值數(shù)據(jù)時(shí),取到的數(shù)據(jù)變成了字符串’true’ ’false’,建議在存儲(chǔ)該類(lèi)型數(shù)據(jù)時(shí)將 value 設(shè)置為 0、1,取值時(shí)用Number(localstorage.getItem(’key’)),再進(jìn)行后續(xù)判斷操作;
具體代碼如下所示:
存值:
if (this.isChecked) { //0:checked localStorage.setItem('checked',0);} else { //1:not checked localStorage.setItem('checked',1);}
取值:
getFlag:function(){ var flag=Number(localStorage.getItem(’checked’)); if(flag==0){ this.flag=true; }else if(flag==1){ this.flag=false; }}總結(jié):
localStorage和sessionStorage都只能存儲(chǔ)字符串類(lèi)型的對(duì)象,對(duì)于JS中常用的數(shù)組或?qū)ο髤s不能直接存儲(chǔ);
可以通過(guò)JSON對(duì)象提供的parse和stringify將其他數(shù)據(jù)類(lèi)型轉(zhuǎn)化成字符串,再存儲(chǔ)到storage中就可以了;
代碼如下:
存值:
localStorage.setItem('flag_data',JSON.stringify(flagData));
取值:
var flag_data=JSON.parse(localStorage.getItem('flag_data'));
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. React+umi+typeScript創(chuàng)建項(xiàng)目的過(guò)程2. .Net core 的熱插拔機(jī)制的深入探索及卸載問(wèn)題求救指南3. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)4. SharePoint Server 2019新特性介紹5. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過(guò)程解析6. html清除浮動(dòng)的6種方法示例7. 讀大數(shù)據(jù)量的XML文件的讀取問(wèn)題8. XML入門(mén)的常見(jiàn)問(wèn)題(二)9. ASP中常用的22個(gè)FSO文件操作函數(shù)整理10. ASP調(diào)用WebService轉(zhuǎn)化成JSON數(shù)據(jù),附j(luò)son.min.asp
