localStorage、sessionStorage 和 Cookie 区别及用法

最新推荐文章于 2022-07-12 11:38:55 发布

webWangGe

最新推荐文章于 2022-07-12 11:38:55 发布

阅读量145

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

原文链接：https://www.jianshu.com/p/bf94eecc9ede

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细比较了localStorage、sessionStorage和cookie三种本地存储方式的特点与使用场景。localStorage数据持久化，适用于长期存储；sessionStorage数据随会话结束而销毁，适合单页面应用；cookie则常用于身份验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区别

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

建议

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

原因:

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

用法

一. localstorage 和 sessionstorage

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

if (window.localStorage) {
    alert('浏览支持 localStorage');
} else {
    alert('浏览暂不支持 localStorage');
}

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