vue储存storage时布尔值问题如何解决-群英

上一篇：vue的组件传值步骤是什么，vue机制如何理解下一篇：基于vue3如何制作打砖块小游戏

这篇文章主要介绍“vue储存storage时布尔值问题如何解决”，有一些人在vue储存storage时布尔值问题如何解决的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

vue储存storage时含有布尔值

今天遇到一个问题，需要将后台返回的true和false存到storage中去，然后用储存的这个值进行逻辑判断，但是一直判断都是错误的，后面查阅了一下资料才发现

在localstorage中储存数据的时候，储存的boolean值都会变成字符串，而不是刚开始储存进去的boolean值

都变成了字符串

那么怎么解决呢？

一：前端进行一次转化

if (localStorage.getItem('布尔值') == 'true') {
		// 重新赋值为新的值
		'布尔值' = true
}

或者是在储存的时候，就不要用boolean值进行存储，用数字或者是其他的进行代替，然后判断就是了

// 后台返回的值是true
if (true) {
	localStorage.setItem('布尔值', 1)
}else {
	localStorage.setItem('布尔值', 2)
}
// 需要用的时候
if (localStorage.getItem('布尔值') == 1) {
	// 处理事件
}else {
	// 处理事件
}

localstorage存储布尔值的一次坑

问题描述

最近工作中使用localstorage存贮一些共享的变量，结果在存贮布尔值的时候遇到了很多问题；

一般情况下，存取如下：

localstorage.setItem('key', value);//存
localstorage.getItem('key');//取

但是在存储布尔型数据时，由于localstorage中存储的boolean数据都变成了字符串,故"true"=true及"false"==false,“true”==false显示都为false，导致尝试了很多次都没有找到问题所在；

最终解决方法

当 localstorage 或 sessionstorage 存储布尔值数据时，取到的数据变成了字符串'true' 'false'，建议在存储该类型数据时将 value 设置为 0、1，取值时用Number(localstorage.getItem('key'))，再进行后续判断操作;

具体代码如下所示：

存值：

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;
     }
}

总结：

localStorage和sessionStorage都只能存储字符串类型的对象，对于JS中常用的数组或对象却不能直接存储；

可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了；

代码如下：

存值：

localStorage.setItem("flag_data",JSON.stringify(flagData));

取值：

var flag_data=JSON.parse(localStorage.getItem("flag_data"));

到此这篇关于“vue储存storage时布尔值问题如何解决”的文章就介绍到这了,更多相关vue储存storage时布尔值问题如何解决内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

标签： vue储存storage

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：vue的组件传值步骤是什么，vue机制如何理解下一篇：基于vue3如何制作打砖块小游戏