返回顶部
首页 > 资讯 > 前端开发 > JavaScript >解决localstorage存储boolean类型值的小坑
  • 714
分享到

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

2024-04-02 19:04:59 714人浏览 独家记忆
摘要

localstorage存储boolean类型值小坑 今天使用localstorage存储boolean数据时,发现怎么弄页面上数据显示就是有问题。 后面才发现,在localstor

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 解决localstorage存储boolean类型值的小坑

本文链接: https://lsjlt.com/news/127553.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 解决localstorage存储boolean类型值的小坑
    localstorage存储boolean类型值小坑 今天使用localstorage存储boolean数据时,发现怎么弄页面上数据显示就是有问题。 后面才发现,在localstor...
    99+
    2024-04-02
  • 浅谈Mybatis+mysql 存储Date类型的坑
    场景: 把一个时间字符串转成Date,存进Mysql。时间天数会比实际时间少1天,也可能是小时少了13-14小时 Mysql的时区是CST(使用语句:show VARIABLES LIKE '%time_zone%'...
    99+
    2022-05-25
    Mybatis mysql 存储Date类型
  • 怎么理解MYSQL数据类型存储中数值型
    怎么理解MYSQL数据类型存储中数值型,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。探索MYSQL 数值类型的存储,以及解读方...
    99+
    2024-04-02
  • 解决springboot 实体类String转Date类型的坑
    目录springboot 实体类String转Date类型Date解析String类型的参数springboot 实体类String转Date类型 前端传入一个String的时间字符...
    99+
    2024-04-02
  • 解决使用pandas聚类时的小坑
    问题背景: 之前运行测试好好的程序,忽然出现了报错,还是merge时候的类型错误,这个bug有点蹊跷。 问题分析: 代码:进行聚类之后计算平均值与方差 tmp_df = df[[...
    99+
    2024-04-02
  • 如何解决MySQL存储时间类型选择的问题
    这篇文章主要为大家展示了“如何解决MySQL存储时间类型选择的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决MySQL存储时间类型选择的问题”这篇文...
    99+
    2024-04-02
  • c#中String类型的存储原理详解
    在我们正式了解c#中的String类型前,先来判断一下下面代码的结果吧~ String str1 = "123"; String str2 = str1; str2 = "321";...
    99+
    2024-04-02
  • 在 MySQL 数据库中存储货币值的最佳数据类型?
    为了表示金钱,我们需要使用 Decimal (TotalDigitsinteger, DigitsAfterDecimalinteger) 方法。 假设我们需要显示值 345.66。为此,计算有多少位可用。值345.66,一共有5位,小数点...
    99+
    2023-10-22
  • Python的类成员变量默认初始值的坑及解决
    目录类成员变量默认初始值的坑问题发现示例代码结果原因解决方法Python默认值参数简单粗暴上代码可以用下面这种写法类成员变量默认初始值的坑 问题发现 一个循环内,缺省值初始化同名变量...
    99+
    2024-04-02
  • C语言详解float类型在内存中的存储方式
    目录1.例子2.浮点数存储规则1.例子 int main() { int n = 9; float *pFloat = (float *)&n; ...
    99+
    2024-04-02
  • Spring中使用自定义ThreadLocal存储导致的坑及解决
    目录Spring自定义ThreadLocal存储导致的坑一个容易想到的实现办法是使用ThreadLocalThreadlocal可能会产生内存泄露的问题及原理为什么会产生内存泄露?J...
    99+
    2024-04-02
  • VUE3+TS获取组件类型遇到的坑怎么解决
    VUE3+TS获取组件类型的方法踩坑获取组件类型的方法const AccountRef = ref<InstanceType<typeof LoginAccount>>()遇到的坑typeof LoginAccoun...
    99+
    2023-05-14
    Vue3 ts
  • VUE3+TS获取组件类型遇到的坑如何解决
    这篇文章主要介绍了VUE3+TS获取组件类型遇到的坑如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇VUE3+TS获取组件类型遇到的坑如何解决文章都会有所收获,下面我们一起来看看吧。VUE3+TS获取组件...
    99+
    2023-07-06
  • 你真的了解PHP数据类型的存储方法吗?
    PHP作为一种脚本语言,拥有着丰富的数据类型。在PHP中,数据类型的存储方法对于程序的性能和可读性都有着重要的影响。本文将介绍PHP数据类型的存储方法,并通过一些演示代码来展示它们的用法。 一、PHP数据类型的基本介绍 在PHP中,数据类型...
    99+
    2023-10-16
    数据类型 存储 教程
  • Spring中使用自定义ThreadLocal存储导致的坑怎么解决
    这篇文章主要介绍了Spring中使用自定义ThreadLocal存储导致的坑怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Spring中使用自定义ThreadLocal...
    99+
    2024-04-02
  • nuxt使用vuex存储及获取用户信息踩坑的解决
    目录一、背景二、具体使用方法以及遇到的问题三、解决办法一、背景 按公司要求做一个电商网站,考虑到seo,所以用的是nuxt进行开发。 登录之后记录用户信息(user)使用cookie...
    99+
    2024-04-02
  • vue储存storage时含有布尔值的解决方案
    vue储存storage时含有布尔值 今天遇到一个问题,需要将后台返回的true和false存到storage中去,然后用储存的这个值进行逻辑判断,但是一直判断都是错误的,后面查阅了...
    99+
    2024-04-02
  • 记VUE3+TS获取组件类型的方法踩坑及解决
    目录VUE3+TS获取组件类型的方法踩坑遇到的坑问题原因解决办法VUE3+TS获取组件ref实例如何获取组件的类型呢?总结VUE3+TS获取组件类型的方法踩坑 获取组件类型的方法 c...
    99+
    2023-03-06
    VUE3 TS VUE3获取组件类型 VUE3 TS获取组件类型
  • Python的类成员变量默认初始值的坑及怎么解决
    这篇文章主要讲解了“Python的类成员变量默认初始值的坑及怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python的类成员变量默认初始值的坑及怎么解决”吧!类成员变量默认初始值的...
    99+
    2023-06-29
  • nuxt使用vuex存储及获取用户信息的坑怎么解决
    这篇文章主要讲解了“nuxt使用vuex存储及获取用户信息的坑怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“nuxt使用vuex存储及获取用户信息的坑怎么解决”吧!一、背景按公司要求...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作