解决localstorage存储boolean类型值的小坑

localstorage存储boolean类型值小坑

今天使用localstorage存储boolean数据时，发现怎么弄页面上数据显示就是有问题。

后面才发现，在localstorage中存储的boolean数据都变成了字符串了，才导致的。

所以"true"=true及"false"==false,“true”==false显示都为false。

localstorage使用不严谨之坑

上线新版本后，发现极个别“老”用户在微信浏览器中无法打开我们网站的首页。在经过一番线上文件代理替

换后，终于发现了问题所在。

问题代码段：

if(localstorage.getItem("things")){
    var things = localstorage.getItem("things");
    use(things);
    //缓存用一次就删除
    localstorage.removeItem('things');
}else{
    use(newData);
}

这段代码乍一看没什么问题，但是有隐患。在老版本中，localstorage中存的things内容如下：

{
    name:'px',
    age:'25'
}

但是到了新版本，由于需求问题，这个缓存的值改变了，变成了如下结构：

{
    username:'px',
    myage:'25'
}

这样就导致了在使用use函数处理things的时候报错了，导致后面的removeItem永远不执行，所以缓存的这段数据在代码中永远不被清除，use函数一直使用旧的数据进行渲染，这样就一直报错，永远无法使用新数据。

这里有两点需要改进的

* 给缓存加版本号 * 用变量读取缓存后，立刻清除缓存

优化后的代码如下：

//先判断缓存版本号
if(localstorage.getItem("version") == curVersion){
    if(localstorage.getItem("things")){
        var things = localstorage.getItem("things");
        //立刻清除
        localstorage.removeItem('things');
        use(things);
    }else{
        use(newData);
    }
}else{
    localstorage.removeItem('things');
    use(newData);
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript使用localStorage存储数据

    背景 以前js都是 Session 和 Cookie 来存储信息,仿佛我还停留在那个时候,一问同事有没有新的solution,才知道现在已经有 HTML5 localStorage 本地存储 这个东西,可以在浏览器端储存数据. 记得最早的Cookies只能存很小的东西,4KB的样子,并且安全性很差,在IE6时代一个域名也只能二十个Cookies吧,限制挺大,当然IE还有userData的东西,没什么用.Flash也带了一个Storage,相对比较大,空间是Cookie的25倍左右,当时现在也废弃

  • 本地存储localStorage用法详解

    一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 二.localStorage的优势与局限 localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可

  • Vue使用localStorage存储数据的方法

    本文实例为大家分享了Vue使用localStorage存储数据的具体代码,供大家参考,具体内容如下 通过下面这个案例来了解localStorage的基本使用方法. 输入评论人.评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表. 1.先组织出一个最新评论数据对象  var comment = {id:Date.now(), user:this.user, content:this.content} 2. 把得到的评论对象,保存到localStorage中  1.l

  • 解决localstorage存储boolean类型值的小坑

    localstorage存储boolean类型值小坑 今天使用localstorage存储boolean数据时,发现怎么弄页面上数据显示就是有问题. 后面才发现,在localstorage中存储的boolean数据都变成了字符串了,才导致的. 所以"true"=true及"false"==false,"true"==false显示都为false. localstorage使用不严谨之坑 上线新版本后,发现极个别"老"用户在微信

  • 解决vue props传Array/Object类型值,子组件报错的情况

    问题: Props with type Object/Array must use a factory function to return the default value. 1.在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候 2.如果子组件的props接收default为 ,如下 报错 原因:props default 数组/对象的默认值应当由一个工厂函数返回 解决: 补充知识:vue的props如何传多个参数 vue父作用域将数据传到子组件通过pro

  • python 提取tuple类型值中json格式的key值方法

    标题比较麻烦,都有些叙述不清:昨天下午在调试接口框架的时候,遇到了一个问题是这样的: 使用python 写了一个函数,return 了两个返回值比如 return a,b 于是返回的a,b 是tuple类型,比如值是actual.那么,得到a,b分别是actual[0] ,actual[1]这样的.而目前,actual[0]的值是这样的: {"code":"m0001","result":True} ,但是我想得到code的key值 m0001

  • 解决MyBatis中为类配置别名,列名与属性名不对应的问题

    解决MyBatis中为类配置别名,列名与属性名不对应的问题

    在传参与接收返回结果的时候,咱们一直是使用的全限定名.但是MyBatis自己在使用很多类型的时候(如Integer,Boolean)却可以直接使用别名.那么,咱们自己的写的类能不能使用别名呢?可以.需要配置. mybatis配置文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//

  • 解决mybatis返回boolean值时数据库返回null的问题

    解决mybatis返回boolean值时数据库返回null的问题

    常规情况,我们使用数据库判断 true or false.所写的语句是select count(id) from 表名: 这种常用情况下,只有当查询语句查到数据 且 只有一条时才会返回 true; 还有一种情况,就是数据库中返回判断句,比如 返回的对错将以1或0表示: 但是当返回值为null,或者多个值的时候 会怎么样呢,0 1 还是报错? 测试表示这种情况下会报错: 希望大家使用 boolean 返回时 也能格外小心. 这里简单做了更改方法,可能不是最优化的,有更好的意见还请不吝赐教. 补充知

  • Java中Integer类型值相等判断方法

    背景 本周开发中遇到一个很低级的问题,Integer包装类的相等判断,包装类与基本数据类型的区别,应该大多数人在面试中经常被问到,但是有的时候大家都会烦这些看起来没啥用的东西,面试前还需要去熟悉,博主之前也是这样认为的,但是平时看一些理论性的东西,在方案探讨或者可行性分析时是很必要的,废话不多少,看看这个问题吧 事故现场 public static void main(String[] args) { Integer a =127; Integer b = 127; Integer c = 12

  • react路由v6版本NavLink的两个小坑及解决

    目录 react路由v6版本NavLink的两个小坑 react 路由React Router(v6) 安装react-router 一级路由 重定向 NavLink高亮 useRoutes路由表----嵌套路由 路由的params参数 路由的search参数 路由的state参数 编程式路由导航 react路由v6版本NavLink的两个小坑 本人新人,是按照文档进行学习的,今遇到两个小坑,现记录如下: 第一点,当前版本的NavLink的style或者className当中的isActive,

  • JS localStorage存储对象，sessionStorage存储数组对象操作示例

    本文实例讲述了JS localStorage存储对象,sessionStorage存储数组对象操作.分享给大家供大家参考,具体如下: 一.前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中. 想着将所有选中商品的独有Id存入数组,利用localStorage存

  • 解决java 分割字符串成数组时,小圆点不能直接进行分割的问题

    问题描述: String preStr = "a.b.c"; // 这里要把该字符串按小圆点进行分割,成"a","b","c" String[] string = preStr.split("."); // 直接这样写是不行的 正确的写法是,对小圆点进行转义 String[] string = preStr.split("\\."); 补充知识:Java中不使用split方法实现字符串分

随机推荐