文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯