vue储存storage时含有布尔值的解决方案

2024-10-01 09:49:18

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 sessionStorage实现保留搜索框搜索内容

最近遇到个需求:因为是后台管理系统,会频繁切换页面(路由),再次切换路由就重新加载页面了,重新输入条件很繁琐,需要保留搜索框的内容.(废话,看不同项目的不同需求吧) 保留搜索框内容: 利用sessionStorage来保存每次搜索框的内容. 后台管理系统的搜索栏除了筛选条件肯定还会有搜索按钮吧我的键名是根据我的页面路由名 + 'Stor'来取名的,这个拼接的'Stor'只是我个人用来区分此后缀的键名是存什么内容的,可按自己喜好来. 比如路由是carManage 键名就是carManageSto
如何在Vue中使localStorage具有响应式(思想实验)

响应式是Vue.js的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个问题时,让Vue响应式与 localStorage 一起使用. 如果运行以下代码,则会看到计数器显示为静态值,并且不会像我们期望的那样发生变化,这是因为setInterval在 localStorage 中更改了该值. new Vue({ el: "#counter", data:
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能. 一.功能实现话不多说,直接上代码 <template> <button @click="getCode()" :disabled="!show"> <span v-show="show">
vue 使用localstorage实现面包屑的操作

mutation.js代码: changeRoute(state, val) { let routeList = state.routeList; let isFind = false; let findeIdex = 0; //菜单栏和下拉的二级菜单 if (val['type'] == 'header' || val['type'] == 'secondHeader') { routeList.length = 0; //顶级菜单清除缓存 localStorage.removeItem("r
Vue基于localStorage存储信息代码实例

一什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在所以上次使用cookie的时候就遇到了一个坑,设置后马上
vue项目如何监听localStorage或sessionStorage的变化

出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态解决方法: 1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件.
vue储存storage时含有布尔值的解决方案

vue储存storage时含有布尔值今天遇到一个问题,需要将后台返回的true和false存到storage中去,然后用储存的这个值进行逻辑判断,但是一直判断都是错误的,后面查阅了一下资料才发现在localstorage中储存数据的时候,储存的boolean值都会变成字符串,而不是刚开始储存进去的boolean值都变成了字符串那么怎么解决呢? 一:前端进行一次转化 if (localStorage.getItem('布尔值') == 'true') { // 重新赋值为新的值 '布尔值'
浅谈vue中子组件传值的默认值情况

当父组件中的content值没有传入时,子组件利用default属性设置默认值,此情况时,页面会显示default value. 当传入content的值时,default属性的默认值不生效,界面显示为: 补充知识:Vue父组件向子组件传值遇到的BUG 当子组件中含有props属性,使用ref对其中的prop属性赋值时报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent
ant design vue的form表单取值方法

目录 ant design vue的form表单取值官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充表单实例 ant design vue的form表单取值官方中有以下两种取值方式因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d
vue parseHTML 函数拿到返回值后的处理源码解析

目录引言 parseStartTag函数返回值 handleStartTag源码 tagName 及unarySlash 调用parser钩子函数引言继上篇文章: parseHTML 函数源码解析 var startTagMatch = parseStartTag(); if (startTagMatch) { handleStartTag(startTagMatch); if (shouldIgnoreFirstNewline(startTagMatch.tagName, html))
速记Python布尔值

在python中.布尔值有 Ture False 两种.Ture等于对,False等于错.要注意在python中对字母的大小写要求非常严格. Ture 和 False 的首字母都要大写. 而布尔值可以互相运算,用 and not or (全部小写)来运算. and 是与运算, >>> Ture and Ture Ture >>> False and Ture False >>> False and False False 在 and 运算中,只有全部为
Vue路由切换时的左滑和右滑效果示例

如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

业务场景重现现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件解决方案我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件代码数据仓库store.js import Vue from '
vue使用ElementUI时导航栏默认展开功能的实现

本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr
详解key在Vue列表渲染时究竟起到了什么作用

Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点.而通常在我们使用v-for这个指令的时候,Vue会要求你给循环列表的每一项添加唯一的key,那么这个key在渲染列表时究竟起到了什么作用呢? 在解释这一点之前,你最好已经了解Vue的diff算法的具体原理是什么. Vue2更新真实DOM的操作主要是两种:创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点,这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点,所以在diff中逻辑都是为了减少新的创建
Vue退出登录时清空缓存的实现

如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount

vue储存storage时含有布尔值的解决方案