cookie、localStorage和sessionStorage的特点及用法

本文详细介绍了浏览器的三种存储方式:Cookie、localStorage和sessionStorage。Cookie用于存储少量信息,通常4KB,关闭浏览器后如果没有设置失效时间则失效。localStorage和sessionStorage提供更大容量的存储,前者5MB且永久有效,后者5MB但只在当前会话内有效。通过示例代码展示了如何进行存储和读取操作,以及设置过期时间和存储路径。了解这些技术对于前端开发者管理用户数据至关重要。

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

cookie

一般由服务器生成,存放到客户端(浏览器中的)可以设置失效时间;若没有设置时间,关闭浏览器cookie失效,若设置了时间,cookie就会存放在硬盘里,过期才失效.存储大约4Kb,存放条数30-50条左右,

// Date时间函数
var d = new Date() // 获取系统内置时间
var o = d.getTime() // 获取当前的时间戳
var b = d.getTime()+(7*60*60*24*1000) // 7天后的时间戳
var b = d.getTime()+(6000) // 6秒后的时间戳
d.setTime(b) // 根据时间戳设置日期
d.toGMTString() // 格林威治时间
d.toUTCString() // 世界时间

// 存储
document.cookie = 'sex=女';

// 存储并且设置过期时间
document.cookie='sex=女;expires='+d.toUTCString()

// 存储过期时间并设置存储位置 '/' 保存到根目录
document.cookie = 'sex=女;expires='+d.toUTCString() + ";path=/";

// 读取
console.log(document.cookie)

localStorage 本地存储

存储大小一般浏览器支持的是5Mb大小.永久有效,窗口或者浏览器关闭也会一直保存,不会自动清除,要手动永久清除,因此用作持久数据

localStorage.setItem('name','张三') // 添加
localStorage.setItem('name','李四') // 相同key的情况下是修改,现在localStorage存储的是name="李四"
localStorage.getItem('name') // 根据key(索引,键值)获取对应的值
localStorage.removeItem('name') // 根据键名删除
localStorage.clear() // 清除全部的localStorage

sessionStorage 临时存储

存储大小为5Mb大小, 仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除

sessionStorage.setItem('name','张三') // 添加
sessionStorage.setItem('name','李四') // 相同key的情况下是修改,现在sessionStorage存储的是name="李四"
sessionStorage.getItem('name') // 根据key(索引,键值)获取对应的值
sessionStorage.removeItem('name') // 根据键名删除
sessionStorage.clear() // 清除全部的sessionStorage

### Web前端存储方式对比 #### Cookie vs LocalStorage vs SessionStorage 的核心差异 在Web前端开发中,存在多种用于客户端数据持久化的技术手段。每种方法都有其独特的特性适用范围。 #### 存储容量与有效期 - **Cookie**具有较小的存储空间(通常不超过4KB),并且可以设定过期时间。如果未指定过期日期,默认情况下当浏览器关闭时即失效[^1]。 - **LocalStorage**提供更大的存储量(一般为5MB左右),所保存的数据不会因为用户的浏览会话结束而丢失,除非通过编程接口显式清除或手动操作删除[^5]。 - **SessionStorage**同样拥有较大的存储能力,但是其所存信息仅限于同一窗口/标签页内的单次会话期间有效;一旦该页面被刷新或是关闭,则之前写入的内容随之消失[^3]。 #### 数据交互特性 - 对于**Cookie**而言,在每次HTTP请求头中都会自动携带已定义的相关Cookies一同发送给服务器端处理逻辑使用。 - 而对于**LocalStorage**以及**SessionStorage**来说,这些数据完全存在于客户端内部,并不参与任何网络传输过程中的附加负载传递行为[^2]。 #### 安全性考量 由于**Cookie**能够参与到跨域资源共享(CORS)机制当中并可能含有敏感的身份验证令牌等重要资料,因此建议对其采取严格的HttpOnly标记保护措施来防止XSS攻击风险[^4]。 相比之下,**LocalStorage****SessionStorage**虽然也面临潜在的安全隐患比如CSRF威胁,但由于它们不具备随同HTTP请求一起提交至远程站点的能力所以相对更加安全一些。 ```javascript // 设置cookie示例 document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC"; // 使用localStorage储存数据 localStorage.setItem('siteTheme', 'dark'); // 利用sessionStorage记录临时状态 sessionStorage.setItem('cartItemsCount', '5'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值