本地存储三种方法cookie、localStorage、sessionStorage；扩展IndexedDB

共同点：都保存在浏览器端、且同源

区别：1、通信 2、存储大小 3、数据有效期 4、作用域

1、通信

• cookie数据始终在同源的http请求头中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• sessionStorage和localStorage是单纯的前端存储，不会主动把数据发送给服务端，仅在本地存储。

2、存储大小

• cookie数据不能超过4KB，因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。
• sessionStorage和localStorage虽然也有存储大小限制，但比cookie大得多，可以达到5MB甚至更多

3、数据有效期

• cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。使用Expires设置cookie的过期时间，Max-Age用于设置在cookie失效之前需要经过的秒数。
• sessionStorage：仅在当前浏览器窗口关闭之前有效；LocalStorage：始终有效，窗口或浏览器关闭也会一直保存，因此用作持久数据，使用手动删除。

4、作用域

• sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；LocalStorage在所有同源窗口中是共享的。
• cookie在所有同源窗口中都是共享的。

IndexedDB

IndexedDB就是浏览器提供的本地数据库，允许存储大量数据，提供查找接口，还能建立索引

特点

• 键值对存储，内部采用对象仓库，数据以键值对形式存储，所有数据都可以直接存入，包括JavaScript对象。
• 异步，IndexedDB操作时不会锁死浏览器，localStorage是同步的。异步可以防止大量数据的读写，拖慢网页的表现。
• 支持事物，一些列操作步骤中，一旦一步失败，整个事务就都取消，不存在只改写一部分数据的情况。
• 同源限制，网页只能访问自身域名下的数据库。
• 存储空间大，不少于250MB，甚至没有上限
• 支持二进制存储，不仅可以存储字符串，还可以存储二进制数据