javascript中sessionStorage 、localStorage 和 Cookie

最新推荐文章于 2025-01-13 15:33:25 发布

转载最新推荐文章于 2025-01-13 15:33:25 发布 · 128 阅读

本文深入解析了前端存储技术，包括Cookie、localStorage和sessionStorage的区别与应用。探讨了它们的生命周期、数据大小限制、与服务器通信方式及安全性。并提供了基本操作示例。

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

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

参考文章：JS 详解 Cookie、 LocalStorage 与 SessionStorage

下面是个人总结内容：

相同点

用于浏览器端存储的缓存数据

不同点

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置的失效时间，到达时间自动过期	除非被清除，否则永久保存	仅用于当前会话，浏览器关闭，立即被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	携带在HTTP头中，数据会发送到服务器端，可能造成宽带浪费	只在客户端，不参与和服务端的通信	只在客户端，不参与和服务端的通信
易用性	需程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

Cookie：

1. 最好精简，因为本身存放数据大小很小
2. 常用于判断用户登录，对于登录过的用户，浏览器会插入一个唯一的标识，当下次用户需要登录，只要读取到这个值，就能判断当前用户是否登录了

localStorage:

1. 购物车管理工作，一些产生的本地数据用以完成数据持久化

sessionStorage：

多页面表单，按步骤引导用户填写

安全性

Cookie、localStorage 和 sessionStorage三者，只要打开控制台，都能看到这三者存放的数据的，并且能够随意修改，所以会产生风险
而sessionStorage使用了session加密，这样用户看到的数据都是经过加密处理过的，会难以获取正确的标识
但是对于localStorage或者Cookie的数据，就可以被肆意妄为的修改或者伪造了
上面是我个人的一些理解，文章中还提到了XSS注入的风险，关于XSS注入为此我专门查了些文档，推荐一篇自我感觉写的相当详细的 Web安全测试之XSS

前者存储空间更大
前者存储内容不会发送到服务器，防止造成宽带浪费
接口丰富
独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，避免造成数据混乱
每个特定的域名下最多生成20个cookie
sessionStorage用于本地存储一个会话存储，关闭会话，随之销毁
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地存储数据而生

一些基本操作

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

setItem存储value

用于存储对象格式的数据

1 2	sessionStorage.setItem("key", "value"); localStorage.setItem("site", "qqqww");

getItem获取value

获取指定关键字段key本地存储的值

1 2	var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem删除key

删除指定关键字段key本地存储的值

1 2	sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear清除所有的key/value

清除所有本地的key/value

1 2	sessionStorage.clear(); localStorage.clear();

其他操作方法：点操作和[ ]

web Storage不但可以用自身的setItem`,getItem`等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储

var storage = window.localStorage
storage.key1 = "hello"
storage["key2"] = "world" 
console.log(storage.key1)
console.log(storage["key2"])

遍历

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); 
}