Cookie和HTML5新增localStorage、sessionStorage的6大区别

前言

本篇文章总结于MDN文档、相关书籍、以及大量的相关文章。

如果发现文章存在错误，请各位大佬指出！！！

如果觉得文章不错，记得点赞、收藏！！

---

正文

Cookie

• 数据生命性：一般由服务器生成，可设置失效时间。(也可以由客户端生成)
• 存放数据大小： 一般大小不能超过4KB
• 作用域：Cookie的作用域仅仅由domain和path决定，与协议和端口无关
• 与服务器端通信：浏览器每次向服务器发出请求，就会自动把当前域名下所有未过期的Cookie一同发送到服务器（会带来额外的性能开销）
• 易用性：缺乏数据操作接口(document.cookie)。
• 适用场景：只有那些每次请求都需要让服务器知道的信息（保持用户的登录状态），才应该放在 Cookie 里面。

localStorage

• 数据生命性：：存储在 localStorage 的数据可以长期保留；
• 存放数据大小： 一般为5MB
• 作用域：localStorage的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。
• 与服务器端通信：不会自动把数据发给服务器，仅在本地保存。
• 易用性：有很多易用的数据操作接口，比如setItem、getItem、removeItem
• 适用场景：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据

sessionStorage

• 数据生命性：sessionStorage 里面的数据在页面会话结束(关闭对应浏览器标签或窗口)时会被清除。
• 存放数据大小： 一般为5MB
• 作用域：sessionStorage的作用域也是限定在文档源级别。但需要注意的是，如果相同文档源的页面渲染在不同的标签中，sessionStorage的数据是无法共享的。
• 与服务器端通信：不会自动把数据发给服务器，仅在本地保存。
• 易用性：有很多易用的数据操作接口，比如setItem、getItem、removeItem
• 适用场景：敏感账号一次性登录；

Web Storage （localStorage、sessionStorage）的优势

• 存储空间更大
• 更节省流量（没有额外性能开销）
• 获取数据从本地获取会比服务器端获取快得多，所以显示更快

---

IndexedDB（补充内容）

• IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。

• IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

• IndexedDB储存空间大,一般来说不少于 250MB，甚至没有上限。

• IndexedDB不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

• 提供查找接口，还能建立索引

• 异步操作：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。