内容出自前端性能优化原理与实践，我作为笔记简单记录下。
从 Cookie 说起
Cookie 就是一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户信息，当服务器检查 Cookie 的时候，便可以获取到客户端的状态。
Cookie 以键值对的形式存在。
Cookie的性能劣势
Cookie 不够大
它最大只能有 4KB，Cookie 只能用来存取少量的信息。
Cookie 是紧跟域名的。
同一个域名下的所有请求，都会携带 Cookie。如果请求一张图也要携带一个 Cookie ，Cookie 虽然小，请求却可以有很多。
为了弥补 Cookie 的局限性，Web Storage 出现了。
向前一步：Web Storage
Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制。它又分为 Local Storage 与 Session Storage。
Local Storage 与 Session Storage 的区别
两者的区别在于生命周期与作用域的不同。
生命周期：Local Storage 是持久化的本地存储，存储在其中的数据是永远不会过期的；而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。
作用域：Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。
Web Storage 的特性
存储容量大： Web Storage 根据浏览器的不同，存储容量可以达到 5-10M 之间。
仅位于浏览器端，不与服务端发生通信。
应用场景
考虑到 Local Storage 的特点之一是持久，图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串：有的网站还会用它存储一些不经常更新的 CSS、JS 等静态资源。
Session Storage 更适合用来存储生命周期和它同步的会话级别的信息，比如微博的 Session Storage 就主要是存储你本次会话的浏览足迹：
说到底，Web Storage 是对 Cookie 的拓展，当遇到大规模的、结构复杂的数据时，Web Storage 也爱莫能助了。这时候我们就要请出终极大 boss——IndexDB！
终极形态：IndexDB
IndexDB 是一个运行在浏览器上的非关系型数据库。。理论上来说，IndexDB 是没有存储上限的（一般来说不会小于 250M）
IndexDB 的应用场景
IndexDB 可以看做是 LocalStorage 的一个升级，当数据的复杂度和规模上升到了 LocalStorage 无法解决的程度，可以请出 IndexDB 来帮忙。
网友评论