cookie、sessionStorage和localStorage的区别（一）

知识调用

文章中可能用到的知识点
前端学习：浏览器缓存方式有哪些（ cookie localstorage sessionstorage）
如何查看Chrome浏览器的页面缓存内容【详细教程】
如何清除浏览器缓存（快捷键+手动）

前言引入

在之前几期文章（见知识调用）中，我们了解了浏览器缓存的相关知识，涉及浏览器缓存方法，查看缓存数据，清除缓存数据。本期文章无缝对接，将 以cookie、sessionStorage和localStorage为核心，介绍三者的相关内容。

---

大致内容安排如下：👇👇👇

文章发展线
cookie、sessionStorage和localStorage的区别（一）详细比较
cookie、sessionStorage和localStorage的区别（二）精简概念
localstorage的基本用法——存储、读取、删除
sessionstorage的基本用法——存储、读取、删除
vue3 antd table 表格的增删改查（三）利用localstorage修改数据

核心干货

一、区分cookie与localStorage、sessionStorage

1）相同点是都是保存在浏览器端、且同源的
2）路径不同

• cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。
• sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
• cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下

3）存储大小限制也不同

• cookie数据不能超过4K，只适合保存很小的数据，如会话标识。
• sessionStorage和localStorage比cookie大得多

4）数据有效期不同

• sessionStorage：仅在当前浏览器窗口关闭之前有效
• localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
• cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

5）作用域不同

• sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
• localstorage在所有同源窗口中都是共享的
• cookie也是在所有同源窗口中都是共享的

---

二、区分cookie与session

1）cookie数据存放在浏览器上，服务器能够知道其中的信息。session数据放在服务器上，客户端不知道其中的信息
2）cookie不是很安全，别人可以分析存放在本地的cookie进行欺骗，考虑到安全应使用session
3）session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
5）建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
6）session中保存的是对象，cookie中保存的是字符串
7）session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

---

三、区分localStorage与sessionStorage

详细比较可以参考相关文章

• localStorage和sessionStorage都属于webStorage本地存储，不参与服务器通信。而且它们都属于window对象，最大存储都在5M左右。

• 区别在于localStorage是永久存储。而sessionStorage的存储时间是当前会话，关闭页面或浏览器就会被清除。

• localStorage可以用来长期保存登陆信息。而sessionStorage可以用来一次性保存登陆信息，而且不同浏览器不共享。

四、sessionStorage与页面js数据对象的区别

1）页面中一般的js对象的生存期仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了
2）sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在

为什么要用sessionStorage，用全局js对象不行吗？

• 一旦刷新页面全局js对象就不在了，而sessionStorage还在。

---

五、web Storage和cookie的区别

1）Web Storage的概念和cookie相似

• 区别是它是为了更大容量存储设计的，cookie的大小是受限的
• 并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽
• 另外cookie还需要指定作用域，不可跨域调用

2）web storage拥有setItem,getItem,removeItem,clear等方法

• 不像cookie需要前端开发者自己封装setCookie，getCookie

3）cookie也是不可或缺的

• cookie的作用是与服务器进行交互，作为http规范的一部分而存在的，而web Storage仅仅是为了在本地“存储”数据而生
• sessionStorage、localStorage、cookie都是在浏览器端存储的数据
• 其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

4）Web Storage的好处

• 减少网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递
• 快速显示数据：性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示
• 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便

---

对于cookie、sessionStorage和localStorage的区别的详细介绍到这结束了

觉得这篇文章有用、对此感兴趣的小伙伴们

可以点赞➕收藏➕关注，方便后续跟进学习哦~🔥🔥🔥