| 特性 | cookies | localStorage | sessionStorage | indexedDB |
|---|---|---|---|---|
| 数据的生命期 | 一般有服务器生成，可设置失效时间。如果在浏览器端生成的cookie，默认关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后失效 | 永久保存 |
| 存放数据的大小 | 4K左右 | PC一般5M,移动端2.5M | PC一般5M,移动端2.5M | 一般没有上限大小 |
| 与服务器通信 | 每次都会携带在http头中，如果使用cookie保存过多会带来性能问题 | 仅在浏览器中保存，不参与和服务器通信 | 仅在浏览器中保存，不参与和服务器通信 | 不参与 |
| 易用性 | 原生的接口不太友好，需要封装下 | 原生接口可以接受，再次封装对Object和Array有更好的支持 | 原生接口可以接受，再次封装对Object和Array有更好的支持 | 比较繁琐，异步，支持事务 |
| 同源策略 | 同源 | 同源 | 同源 | 同源 |
共同点：
- 都保存在浏览器端，都是同源的。
区别:
- cookie数据始终在同源的http请求中携带，而webStorage不会在请求中请求，仅仅在本地存储；
- 存储大小区别， cookie是最大长度4K，webStorage可以达到5M甚至更大，indexedDB无限制；
- 数据有效时间区别， sessionStorage 仅仅是会话级别的存储，它只在当前浏览器关闭前有效，不能持久保持；localStorage 始终有效，即使窗口或浏览器关闭也一直有效，除非用户手动删除，其才会失效；cookie 只在设置的 cookie 过期时间之前一直有效，indexedDB持久存储；
- 作用域区别：sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；localStorage、cookie和indexedDB在所有同源窗口都是共享的；
- webStorage支持事件通知机制，可以将数据更新的通知发送给监听者。api的接口使用更方便。
- indexedDB支持事务。
网友评论