(根据牛客面经和 MDN Web文档整理了一些关于cookie,localStorage,sessionStorage的相关知识,如有误欢迎指正)
cookie在浏览器请求中每次都会附加请求头中发送给服务器。大小不能超过4k
localStorage保存数据会一直保存没有过期时间,不会随浏览器发送给服务器。大小5M或更大
sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大
Cookie
HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面:
会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
个性化设置(如用户自定义设置、主题等)
浏览器行为跟踪(如跟踪分析用户行为等)
Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘汰。由于服务器指定Cookie后,浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销(尤其是在移动环境下)。新的浏览器API已经允许开发者直接将数据存储到本地,如使用 Web storage API (本地存储和会话存储)或 IndexedDB 。
优点
- 数据持久性。
- 不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读取。
- 可配置到期规则。 控制 cookie 的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的 cookie 。
- 简单性。 基于文本的轻量结构。
- 通过良好的编程,控制保存在 cookie 中的 session 对象的大小。
- 通过加密和安全传输技术( SSL ),减少 cookie 被破解的可能性。
- 只在 cookie 中存放不敏感数据,即使被盗也不会有重大损失。
缺点
- Cookie 数量和长度的限制 。
数量:每个域的 cookie 总数有限。
a) IE6 或更低版本最多 20 个 cookie
b) IE7 和之后的版本最后可以有 50 个 cookie
c) Firefox 最多 50 个 cookie
d) chrome 和 Safari 没有做硬性限制
长度:每个 cookie 长度不超过 4KB ( 4096B ),否则会被截掉。 - 潜在的安全风险 。 Cookie 可能被拦截、篡改。如果 cookie 被拦截,就有可能取得所有的 session 信息。
- 用户配置为禁用 。有些用户禁用了浏览器或客户端设备接受 cookie 的能力,因此限制了这一功能。
- 有些状态不可能保存在客户端 。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。
Web Storage
Web Storage 包含如下两种机制:
sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。
优点
- 容量大
- 请求中不会携带数据
缺点
- localStorage在浏览器的隐私模式下面是不可读取的
- localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
- localStorage不能被爬虫抓取到
区别
1. 存储空间不同
a) Web Storage 能提供 5MB 的存储空间(不同 浏览器 的提供的空间不同),Cookie 仅 4KB 。
b) Web Storage 每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。
2. 与服务器交互
Web Storage 中的数据则仅仅是存在本地,不会与服务器发生任何交互。
Cookie 的内容会随着请求一并发送的服务器(带宽浪费)。
3. 接口
Web Storage 提供更多丰富易用的接口,拥有 setItem , getItem , removeItem , clear 等方法,操作数据更方便。
Cookie 需要前端开发者自己封装 setCookie , getCookie 。
4. 跨域问题
cookie 需要指定作用域,不可以跨域调用。