在前端日常开发中 cookie
、webStorage
是我们常用的浏览器缓存方式。但同时说起 cookie
、session
、sessionStorage
和 localStorage
是不是有些傻傻分不清楚了?本文梳理概括了它们的区别及应用场景,相信对你的面试和实际应用都有一定帮助。
cookie
- 由服务端生成,保存在客户端(由于前后端有交互,所以安全性差,且浪费带宽)
- 存储大小有限(最大 4kb )
- 存储内容只接受
String
类型 -
保存位置:
- 若未设置过期时间,则保存在
内存
中,浏览器关闭后销毁 - 若设置了过期时间,则保存在
系统硬盘
中,直到过期时间结束后才消失(即使关闭浏览器)
- 若未设置过期时间,则保存在
- 数据操作不方便,原生接口不友好,需要自己封装
-
应用场景
- 判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)
- 保存登录时间、浏览次数等信息
设置了过期时间的cookie存在了哪里呢?
Mac: /Users/用户名/Library/caches/Google/Chrome/Default/cache
Windows: C:\Users\用户名\AppData\LocalMicrosoft\Windows\Temporary Internet Files
session
- 是后端关心的内容,依赖于 cookie(sessionID 保存在cookie中)
- 保存在服务端
- 存储大小无限制
- 支持任何类型的存储内容
- 保存位置:服务器内存,若访问较多会影响服务器性能
webStorage
webStorage
是 html5 提供的本地存储方案,包括两种方式:sessionStorage
和 localStorage
。相比 cookie
这种传统的客户端存储方式,webStorage
有许多优点:
- 保存在客户端,不与服务器通信,因此比
cookie
更安全、速度更快 - 存储空间有限,但比 cookie 大(5MB)
- 仅支持
String
类型的存储内容(和 cookie 一样) -
html5 提供了原生接口,数据操作比 cookie 方便
-
setItem(key, value)
保存数据,以键值对的方式储存信息。 -
getItem(key)
获取数据,将键值传入,即可获取到对应的value值。 -
removeItem(key)
删除单个数据,根据键值移除对应的信息。 -
clear()
删除所有的数据 -
key(index)
获取某个索引的key
-
localStorage
- 持久化的本地存储,浏览器关闭重新打开数据依然存在(除非手动删除数据)。
- 应用场景:长期登录、判断用户是否已登录,适合长期保存在本地的数据。
存储文件夹:
Mac: /Users/用户名/Library/Application Support/Google/Chrome/Default/Local Stroage
Windows: C:\Users用户名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage
sessionStorage
- 浏览器窗口关闭后数据被销毁。
- 应用场景:敏感账号一次性登录。
总结
综上所述,我们可以知道,cookie
和 webStorage
( localStorage、sessionStorage )是前端工程师关心的内容,session
是后端关心的内容。cookie
存储量小、安全性差、数据操作接口不友好,而 webStorage
存储量较大、安全性较高、数据接口友好。
若要持久的存储方式,推荐使用 localStorage
若要一次性会话的存储,推荐使用 sessionStorage
看完有收获吗?喜欢请点赞支持哦~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。