前端开发面试题之Cookie、sessionStorage、localStorage 的区别

⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。

 

参考回答：

 

共同点：都是保存在浏览器端，并且是同源的。

 

 

Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器

和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅

在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下,

存储的大小很小只有 4K 左右。 （key：可以在浏览器和服务器端来回传递，存储容量

小，只有大约 4K 左右）；

 

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

 

localStorage： 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

 

cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关 闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为 同一次回话）

 

localStorage：localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中

都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与

否都会始终生效）

 

 

补充说明一下 cookie 的作用：

 

1.保存用户登录状态。

 

例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面

时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置

过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保

持登录状态的时间：常见选项有一个月、三个 月、一年等。

 

2.跟踪用户行为。

 

例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。

如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能

够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区

的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一

样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使

用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以

保存上一次访问的界面风格。

 

 

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。