0
点赞
收藏
分享

微信扫一扫

localStorage和sessionStorage和Cookie区别及用法使用介绍


区别



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


localStorage和sessionStorage和Cookie区别及用法使用介绍_Cookie

建议


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


原因:



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


用法

一. localstorage 和 sessionstorage

  1. 首先要判断浏览器是否支持 localStorage / sessionStorage
    比如判断 localStorage
if (window.localStorage) {
alert('浏览支持 localStorage');
} else {
alert('浏览暂不支持 localStorage');
}
  1. localStorage 和 sessionStorage 都具有相同的操作方法,例如 ​​setItem()​​​、​​getItem()​​​ 和 ​​removeItem()​​ 等
  • 储存数据 用途: 将 ​​value​​​ 存储到 ​​key​​​ 字段
    用法: ​​​setItem( key, value)​​ 代码示例
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

注: 如果需要储存数组或对象的话, 可以用JSON格式传入

  • 取出数据 用途: 获取指定 ​​key​​​ 本地存储的值
    用法: ​​​getItem(key)​​ 代码示例
sessionStorage.getItem('key');
localStorage.getItem('key');
  • 修改数据 用途: 修改指定 ​​key​​​ 本地存储的值
    用法: ​​​setItem(key)​​ 代码示例
sessionStorage.setItem('key', 'newVal');
localStorage.setItem('key', 'newVal');
  • 删除数据 用途: 删除指定 ​​key​​​ 本地存储的值
    用法: ​​​removeItem(key)​​ 代码示例
sessionStorage.removeItem('key');
localStorage.removeItem('key');
  • 清除数据 用途: 清除所有本地存储的数据
    用法: ​​​clear()​​ 代码示例
sessionStorage.clear();
localStorage.clear();

二. cookie

  • 储存数据
window.document.cookie = 'key=val';
  • 取出数据
document.cookie

example:

// 设置 Cookie
setCookie(key, val, days) {
let date = new Date(); // 获取时间
date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days);
// 字符串拼接 Cookie
window.document.cookie = `${key}=${val};path=/;expires=${date.toGMTString()};`;
}


// 获取 Cookie
getCookie() {
let cookie = document.cookie.split(';');
}


// 清除Cookie
clearCookie() {
this.setCookie('', '', -1);
}


举报

相关推荐

0 条评论