本地存储的多种方式：cookie、localStorage、sessionStorage对比

颖儿♡＾▽＾♡

已于 2023-11-27 10:52:37 修改

阅读量7.5k

点赞数 4

分类专栏： vue 文章标签： vue.js 七牛云第二届1024创作节勇敢牛牛，必然获奖队

于 2023-11-22 12:36:50 首次发布

本文链接：https://blog.csdn.net/qq_52126119/article/details/134550689

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在前端开发中，偶尔需要存储一些如：用户信息、登录状态、历史记录等常量数据。用于后续二次调用，并且避免刷新后丢失。这时，就需要用到本地存储了。

cookie

cookie的具体实现过程：

当用户访问web服务器后，web服务器会获取用户的状态并且返回一些数据（cookie）给浏览器，浏览器会自动储存这些数据（cookie)。
当用户再次访问web服务器，浏览器会把cookie放到请求报文中发送给web服务器，web服务器就会获取到了用户的状态。
基于这次用户的状态方便用户进行其他业务的访问，并且web服务器可以设置浏览器保存cookie的时间，cookie是有域名的概念，只有访问同一个域名的时候才会把之前相同域名返回的cookie携带给该web服务器。

缺陷：

容量缺陷：Cookie的体积上限只有4KB，只能用来存储少量的信息。
性能缺陷：Cookie是紧跟域名的，不管域名下面的某个地址需不需要这个Cookie，它都会携带上完整的Cookie。这样随着请求数据的增多，很容易造成性能上的浪费。
安全缺陷：由于Cookie以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，并在Cookie的有效期内重新发送给服务器。另外，在HTTPOnly为false的情况下，Cookie信息能直接通过JS脚本读取。

代码示例：

document.cookie = "username=ziming; expires=Thu, 16 Dec 2015 12:00:00 GMT; path=/"    // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

cookie的属性

（1）Name

cookie的名字，一个域名下绑定的cookie的name不能相同。如果是相同的name则会被覆盖。

（2）value

每个cookie拥有的属性，表示cookie的值。

由于cookie规定是名称/值是不允许包含分号，逗号，空格的，所以为了不给用户到来麻烦，考虑服务器的兼容性，任何存储cookie的数据都应该被URL编码。

（3）domain

cookie的域名。cookie绑定的域名，如果没有设置，自动绑定当前执行语句的的域。同一个域名下的二级域名也是不可以交换cookie的。

（4）path

path是默认属性’/'，匹配web路由

路径设置/blog的时候，也会给/blog绑定cookie

//默认
www.baidu.com
//blog路径
www.baidu.com/blog

（5）Expires

expires是cookie的有效期。一般浏览器的cookie是默认存储的，关闭浏览器结束会话，cookie就会被删除。

如果想要cookie续存一段时间，可以通过设置expires有效期。

expires现在被Max-Age取代：Max-Age，是以秒为单位的，Max-Age为正数时，cookie会在Max-Age秒之后，被删除；当Max-Age为负数时，表示的是临时储存，不会生出cookie文件，只会存在浏览器内存中，且只会在打开的浏览器窗口或者子窗口有效，一旦浏览器关闭，cookie就会消失；当Max-Age为0时，删除cookie，因为cookie机制本身没有设置删除cookie，失效的cookie会被浏览器自动从内存中删除，所以，它实现的就是让cookie失效。

（6）secure

安全。http无状态无加密，不安全协议容易被攻击挟持。比如你在浏览页面的时候是不是会有小广告出来。这个secure属性为true的时候，这个时候的cookie只会在https和ssl等安全协议下传输。不能对cookie加密，绝对安全保证做不到。

（7）httpOnly

安全的 Cookie 需要经过 HTTPS 协议通过加密的方式发送到服务器。即使是安全的，也不应该将敏感信息存储在cookie 中，因为它们本质上是不安全的，并且此标志不能提供真正的保护。

作用：①会话 Cookie 中缺少 HttpOnly 属性会导致攻击者可以通过程序(JS脚本、Applet等)获取到用户的 Cookie 信息，造成用户 Cookie 信息泄露，增加攻击者的跨站脚本攻击威胁。

②HttpOnly 是微软对 Cookie 做的扩展，该值指定 Cookie 是否可通过客户端脚本访问。

③如果在 Cookie 中没有设置 HttpOnly 属性为 true，可能导致 Cookie 被窃取。窃取的 Cookie 可以包含标识站点用户的敏感信息，如 ASP.NET 会话 ID 或 Forms 身份验证票证，攻击者可以重播窃取的 Cookie，以便伪装成用户或获取敏感信息，进行跨站脚本攻击等。

localStorage

1.HTML5新方法，IE8及以上浏览器都兼容

2.除非手动清除，否则永久保存在浏览器

3.存储大小一般为5MB

4.只存在于客户端（浏览器）中，不参与和服务器的通信

5.相同浏览器的不同页面间可以共享相同的 localStorage

6.不同浏览器无法共享localStorage或sessionStorage中的信息

// 设置本地存储
localStorage.setItem('key', 'value')

// 获取本地存储
const value = localStorage.getItem('key')

// 删除本地存储
localStorage.removeItem('key')

sessionStorage

1 仅在当前会话下有效，浏览器被关闭或当前页面被关闭的情况下清除

2 存储大小一般为5MB

3 只存在于客户端（浏览器）中，不参与和服务器的通信

4 api使用简单，可以直接拿来使用，也可自己封装来对Object和Array有更好的支持

5 不同页面或标签页间无法共享sessionStorage的信息

6 不同浏览器无法共享localStorage或sessionStorage中的信息

// 设置会话存储
sessionStorage.setItem('key', 'value')

// 获取会话存储
const value = sessionStorage.getItem('key')

// 删除会话存储
sessionStorage.removeItem('key')

区别

名称	存储大小	有效时间	数据与服务器之间的交互方式	访问策略
cookie	数据大小不能超过4k	与设置的cookie过期时间有关，过期时间之前一直有效，即使窗口或浏览器关闭依然有效	cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端	符合同源策略可以访问
localStorage	一般为 5M，大小根据厂商不同有所差异（2.5 ~ 10 M 波动）	存储数据持久，浏览器关闭后数据不丢失除非主动删除数据，否则数据一直存在。	仅在本地保存，不与服务器交互	即使符合同源也不可以相互访问
sessionStorage	一般为 5M，大小根据厂商不同有所差异（2.5 ~ 10 M 波动）	数据在当前浏览器窗口关闭后自动删除	仅在本地保存，不与服务器交互	符合同源策略可以访问