localStorage sessionStorage Cookie 区别和用法

迈不过友情╰ 2021-12-17 00:21 389阅读 0赞

原文: https://blog.csdn.net/shenxianhui1995/article/details/93010158

区别

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失

  • sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的
  • cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

  • 建议

    由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适

    原因:

    • sessionStorage 可以保证打开页面时 sessionStorage 的数据为空
    • 每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据

    用法

    一. localstorage 和 sessionstorage

    1. 首先要判断浏览器是否支持 localStorage / sessionStorage
      比如判断 localStorage

      if ( window.localStorage) { 

      1.   alert( '浏览支持 localStorage'); 
      2.   } else { 
      3.   alert( '浏览暂不支持 localStorage'); 
      4.   }

    2. localStorage 和 sessionStorage 都具有相同的操作方法，例如 setItem()、getItem() 和 removeItem() 等

      • 储存数据
        用途: 将 value 存储到 key 字段
        用法: setItem( key, value)
        代码示例

      sessionStorage.setItem( ‘key’, ‘value’); 

      1.   localStorage.setItem( 'key', 'value');
      • 取出数据
        用途: 获取指定 key 本地存储的值
        用法: getItem(key)
        代码示例

      sessionStorage.getItem( ‘key’); 

      1.   localStorage.getItem( 'key');
      • 修改数据
        用途: 修改指定 key 本地存储的值
        用法: setItem(key)
        代码示例

      sessionStorage.setItem( ‘key’, ‘newVal’); 

      1.   localStorage.setItem( 'key', 'newVal');
      • 删除数据
        用途: 删除指定 key 本地存储的值
        用法: getItem(key)
        代码示例

      sessionStorage.removeItem( ‘key’); 

      1.   localStorage.removeItem( 'key');
      • 清除数据
        用途: 清除所有本地存储的数据
        用法: clear()
        代码示例

      sessionStorage .clear(); 

      1.   localStorage .clear();

    二. cookie

    • 储存数据

      window.document.cookie = ‘xxx’;

    • 取出数据

      document.cookie

      1.               </div>

发表评论

表情：
评论列表 （有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读