zoukankan      html  css  js  c++  java
  • localstorage、sessionstorage 存储布尔值要注意

    今天实现一个功能,点击首页,头部按钮,切换大屏功能。不同的屏,页头宽度不一样,小屏1280px,  大屏百分百屏幕,左右留点120px的padding值。

    思路:点击按钮,切换不同的子路由,顶部通过一个值,控制头部样式。刷新页面,头部要和路由相对应。关闭页面。默认进首页。这时,我想到用sessionStorage 。

    • 关闭浏览器sessionStorage 失效;
    • 页面刷新不会消除数据;

    但是,当 localstorage 或 sessionstorage 存储布尔值数据时,取到的数据变成了字符串'true' 'false',

    建议在存储该类型数据时将 value 设置为 0、1,取值时用Number(localstorage.getItem('key')),再进行后续判断操作。

    相关代码:

    template结构:

    vuex代码:

     

    data,computed定义获取数值:

    点按钮,切换界面。

    localstorage,sessionstorage 存取数据方式:

    存储字符、数字、布尔值等

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

    存储对象

    存:localstorage.setItem("key", JSON.stringift(key-value)); 取:JSON.parse(localstorage.getItem('key'));

     

  • 相关阅读:
    ES6新特性
    浏览器兼容问题
    跨域
    箭头函数与普通函数的区别
    单页面应用
    vue试题
    Git 常用命令
    【分享代码】一个笨办法获取容器的剩余内存
    【笔记】thanos receiver的router模式
    【分享】让prometheus支持PUSH模式,可以使用remote write协议推送数据
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/13064912.html
Copyright © 2011-2022 走看看