localStorage、sessionStorage 和 Cookie 区别及用法

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

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

区别

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

  2. sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的

  3. cookie: cookie生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取

建议

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


 

<think>我们被要求比较localStoragesessionStoragecookie的使用场景。根据引用内容,我们可以总结如下:1.**Cookie**:-使用场景:主要用于需要**在浏览器服务器之间来回传递**的数据,例如用户登录状态、身份验证令牌等。因为每次HTTP请求都会自动携带cookie(除非设置了HttpOnly,但仍在请求头中)[^3][^4]。-特点:-存储容量小(约4KB)-可以设置过期时间-在所有同源窗口中共享-可通过`document.cookie`访问设置(注意安全性,敏感数据应设置HttpOnly)2.**localStorage**:-使用场景:适合**长期存储**在客户端的数据,例如用户偏好设置(主题、语言)、缓存数据等[^3][^4]。这些数据不需要发送给服务器,且需要持久化(即使关闭浏览器也不会消失)。-特点:-存储容量较大(约5MB)-数据永久存储,除非手动清除-在同源的所有标签页窗口之间共享-支持`storage`事件,可以跨标签页同步数据变更[^4]-通过`localStorage.setItem(key, value)``localStorage.getItem(key)`等方法操作3.**sessionStorage**:-使用场景:适用于**单次会话**的临时数据存储,例如当前页面表单的临时填写内容、单页面的元素点击次数统计等[^3][^4]。这些数据只在当前标签页有效,关闭标签页后自动清除。-特点:-存储容量较大(约5MB)-数据仅在当前标签页有效,关闭标签页即清除-不与其他标签页共享(即使同源)-刷新页面不会清除数据(只要标签页未关闭)-操作方法与localStorage相同(`sessionStorage.setItem`等)总结对比表:|特性| Cookie| localStorage| sessionStorage| |--------------------|---------------------------------------------|-----------------------------------------|-----------------------------------------| |**容量**|约4KB|约5MB|约5MB| |**生命周期**|可设置过期时间(默认浏览器关闭失效)|永久存储,直到手动清除|标签页关闭即清除| |**是否随请求发送** |是(在HTTP头中)|否|否| |**跨标签页共享**|是(同源)|是(同源)|否(仅当前标签页)| |**主要使用场景**|用户认证、服务器需读取的数据|长期保存的客户端数据(主题、语言等)|当前会话的临时数据(表单草稿等)|根据引用[^4]的技术选型指南: -需要服务器识别的状态(如登录)→**Cookie**(并设置HttpOnly)-长期保存用户设置(主题/语言) →**localStorage**-单次浏览会话的临时数据(如表单) →**sessionStorage**-大容量客户端缓存(>4KB) →**localStorage**(避免Cookie的性能开销)因此,在选择存储方式时,应优先考虑数据的生命周期、是否需要与服务器交互以及数据大小等因素。§§相关问题§§1.如何安全地在Cookie中存储敏感信息?2.localStorage的数据如何实现跨标签页同步? 3. sessionStorage在单页面应用(SPA)中的使用注意事项?4.如何实现localStorage的自动过期功能?</think>### localStoragesessionStorage Cookie 使用场景对比 根据引用内容,以下是三者核心使用场景的详细对比: #### 🍪 **Cookie 使用场景** [^1][^3][^4] 1. **用户身份认证** - 存储登录凭证(如 Session ID) - 自动在请求头中发送给服务器(`Authorization: Bearer xxxx`) - 示例:保持用户登录状态 2. **服务器交互数据** - 跟踪用户行为(如购物车商品ID) - 跨页面传递简单参数 - 需设置 `HttpOnly` 保护敏感数据 3. **传统兼容场景** - 需支持旧版浏览器(如 IE9 以下) - 数据量小(≤4KB)的键值对 #### 💾 **localStorage 使用场景** [^1][^3][^4] 1. **长期本地存储** - 用户偏好设置(主题/语言/字体大小) - 离线应用数据缓存(如文档草稿) - 示例:保存用户选择的深色模式 2. **大容量数据缓存** - 存储 JSON 格式的复杂数据(≤5MB) - 避免重复请求静态资源(如图标配置) - 跨标签页同步数据(通过 `storage` 事件) 3. **性能优化** - 缓存 API 响应减少网络请求 - 存储非敏感客户端计算数据 #### 📦 **sessionStorage 使用场景** [^1][^3][^4] 1. **单次会话数据** - 表单填写临时保存(防页面刷新丢失) - 当前页面操作状态(如分页器位置) - 示例:电商下单流程的多步骤数据暂存 2. **页面级隔离数据** - 统计当前页面元素点击次数 - 标签页私有数据(不同标签互不干扰) - 敏感信息临时存储(关闭即清除) 3. **单页应用(SPA)状态** - 路由切换时的临时参数传递 - Vue/React 组件的临时状态备份 --- ### 📊 技术选型决策指南 | **需求场景** | **推荐方案** | **核心理由** | |-------------------------------|--------------------|----------------------------------------------------------------------------| | 用户登录状态/身份认证 | Cookie | 自动随请求发送至服务器,支持`HttpOnly`安全防护 [^3][^4] | | 长期用户设置(主题/语言) | localStorage | 持久化存储无过期时间,5MB容量 [^3][^4] | | 表单草稿/单次会话数据 | sessionStorage | 标签页关闭自动清理,隔离不同标签页操作 [^4] | | 大容量客户端缓存(>4KB) | localStorage | 避免Cookie性能开销,支持结构化数据 [^4] | | 需服务器读取的数据 | Cookie | 自动在请求头中传输 [^3] | | 敏感数据临时存储 | sessionStorage | 会话结束自动清除,降低泄露风险 [^3] | --- ### ⚠️ 关键区别总结 1. **生命周期** - Cookie:可设置过期时间(默认会话结束失效) - localStorage:永久存储(需手动清除) - sessionStorage:标签页关闭即清除 [^3] 2. **数据传递** - Cookie:自动在浏览器请求头中发送 - localStorage/sessionStorage:仅在客户端存储 [^3] 3. **作用域** - sessionStorage:不跨标签页(即使同源) - localStorage/Cookie:同源窗口共享 [^3] 4. **容量限制** - Cookie:≤4KB - localStorage/sessionStorage:≤5MB [^3] > **设计本质**:Cookie 是**服务端驱动的存储**,localStorage/sessionStorage 是**纯客户端存储**[^3][^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值