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