浏览器存储
约 495 字大约 2 分钟
2022-04-14
提问
- 浏览器有哪些存储方式？
- 什么是 cookie ？
- 什么是 本地存储？
- 什么是 indexedDB ?
- 它们之间有什么区别？
浏览器存储技术
- cookie
- Web Storage
- IndexedDB
cookie
cookie 指网站为了辨别用户身份而存储在用户本地终端的数据，通常该数据经过加密。
cookie 是服务端生成的，在客户端进行维护和存储，存储在内存或磁盘中。
cookie 可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态维护。比如维护用户登录态等。
cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Web Storage
Web Storage 提供了存储机制。通过该机制，，浏览器可以安全的存储键值对，比使用cookie更加直观。
Web Storage 提供了两种存储机制：
- sessionStorage: 会话级别的存储。浏览器为每一个给定的源维持了一个独立的存储区域， 该存储区域在页面会话期间可用。
- localStorage: 跟 sessionStorage同样的功能，但提供了长期存储机制， 即浏览器关闭后重新打开，数据仍然存在。
IndexedDB
IndexedDB 用于在客户端存储大量的结构化数据。
IndexedDB 是基于 javascript的面向对象数据库，允许存储和检索用键索引的对象。
特点：
- 键值对存储
- 支持事务
- 异步
- 同源限制
- 存储空间大
- 支持二进制存储
区别
| 特性 | cookie | localStorage | sessionStorage | indexedBD |
|---|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可以设置过期时间 | 除非被清理，否则一直存在 | 页面被关闭就清理 | 除非被清理，否则一直存在 |
| 数据存储大小 | 4k | 5M | 5M | 没有限制 |
| 与服务端通信 | 每次都会携带在headers中 | 不参与 | 不参与 | 不参与 |