Skip to content

浏览器存储

497字约2分钟

2022-04-14

提问

  1. 浏览器有哪些存储方式?
  2. 什么是 cookie ?
  3. 什么是 本地存储?
  4. 什么是 indexedDB ?
  5. 它们之间有什么区别?

浏览器存储技术

  • cookie
  • Web Storage
  • IndexedDB

cookie 指网站为了辨别用户身份而存储在用户本地终端的数据,通常该数据经过加密。

cookie 是服务端生成的,在客户端进行维护和存储,存储在内存或磁盘中。

cookie 可以让服务器知道请求是来源哪个客户端,就可以进行客户端状态维护。比如维护用户登录态等。

cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Web Storage

Web Storage 提供了存储机制。通过该机制,,浏览器可以安全的存储键值对,比使用cookie更加直观。

Web Storage 提供了两种存储机制:

  • sessionStorage: 会话级别的存储。浏览器为每一个给定的源维持了一个独立的存储区域, 该存储区域在页面会话期间可用。
  • localStorage: 跟 sessionStorage同样的功能,但提供了长期存储机制, 即浏览器关闭后重新打开,数据仍然存在。

IndexedDB

IndexedDB 用于在客户端存储大量的结构化数据。

IndexedDB 是基于 javascript的面向对象数据库,允许存储和检索用键索引的对象。

特点:

  • 键值对存储
  • 支持事务
  • 异步
  • 同源限制
  • 存储空间大
  • 支持二进制存储

区别

特性cookielocalStoragesessionStorageindexedBD
数据生命周期一般由服务器生成,可以设置过期时间除非被清理,否则一直存在页面被关闭就清理除非被清理,否则一直存在
数据存储大小4k5M5M没有限制
与服务端通信每次都会携带在headers中不参与不参与不参与