特性 | 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支持事务。