vue儲(chǔ)存storage時(shí)含有布爾值的解決方案
vue儲(chǔ)存storage時(shí)含有布爾值
今天遇到一個(gè)問題，需要將后臺(tái)返回的true和false存到storage中去，然后用儲(chǔ)存的這個(gè)值進(jìn)行邏輯判斷，但是一直判斷都是錯(cuò)誤的，后面查閱了一下資料才發(fā)現(xiàn)
在localstorage中儲(chǔ)存數(shù)據(jù)的時(shí)候，儲(chǔ)存的boolean值都會(huì)變成字符串，而不是剛開始儲(chǔ)存進(jìn)去的boolean值
都變成了字符串
那么怎么解決呢？
一：前端進(jìn)行一次轉(zhuǎn)化
if (localStorage.getItem('布爾值') == 'true') {
// 重新賦值為新的值
'布爾值' = true
}
或者是在儲(chǔ)存的時(shí)候，就不要用boolean值進(jìn)行存儲(chǔ)，用數(shù)字或者是其他的進(jìn)行代替，然后判斷就是了
// 后臺(tái)返回的值是true
if (true) {
localStorage.setItem('布爾值', 1)
}else {
localStorage.setItem('布爾值', 2)
}
// 需要用的時(shí)候
if (localStorage.getItem('布爾值') == 1) {
// 處理事件
}else {
// 處理事件
}
localstorage存儲(chǔ)布爾值的一次坑
問題描述
最近工作中使用localstorage存貯一些共享的變量，結(jié)果在存貯布爾值的時(shí)候遇到了很多問題；
一般情況下，存取如下：
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)致嘗試了很多次都沒有找到問題所在；
最終解決方法
當(dāng) localstorage 或 sessionstorage 存儲(chǔ)布爾值數(shù)據(jù)時(shí)，取到的數(shù)據(jù)變成了字符串'true' 'false'，建議在存儲(chǔ)該類型數(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ǔ)字符串類型的對(duì)象，對(duì)于JS中常用的數(shù)組或?qū)ο髤s不能直接存儲(chǔ)；
可以通過JSON對(duì)象提供的parse和stringify將其他數(shù)據(jù)類型轉(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過示例代碼詳細(xì)講解,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue的雙向綁定和依賴收集，主要是通過Object.defineProperty() 實(shí)現(xiàn)雙向綁定，具體思路代碼大家跟隨小編一起看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頂部菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了解決vue的component標(biāo)簽渲染問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
一個(gè)好的項(xiàng)目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
解決vue2+vue-router動(dòng)態(tài)路由添加及路由刷新后消失問題
這篇文章主要介紹了解決vue2+vue-router動(dòng)態(tài)路由添加及路由刷新后消失問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue的子父組件傳值之小白必看篇，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02