前端 Web 存储简介_前端websocket接收的数据存储在哪里-CSDN博客

1.cookie（又名 webcookie/浏览器cookie）

cookie 主要用于以下三个方面：

会话状态管理（用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（用户自定义设置、主题等）
浏览器行为跟踪（跟踪分析用户行为等）

特点：

cookie 的大小受限，一般为 4 KB
同一个域名下存放 cookie 的个数是有限制的，不同浏览器的个数不一样，一般为 20 个
cookie 可设置过期时间，当过期时自动销毁
每次发起同域下的 HTTP 请求时，都会携带当前域名下的cookie
支持设置为 HttpOnly，防止cookie被客户端的 JavaScript 访问

2.localStorage

属于永久性储存，只要不手动清除是不会自己消失的。相比于cookie能存更大更多的数据。

特点：

大小限制为 5MB ~10MB
在同源的所有标签页和窗口之间共享数据
数据只保存在客户端，不主动与服务器进行通信
数据持久存在且不会过期，重启浏览器后仍然存在
对数据的操作是同步的

3.sessionStorage

属于短暂性储存，关闭浏览器就自动清除。等同于服务端的session(区别详见：https://blog.csdn.net/sylvia_0815/article/details/104393923)。sessionStorage 的作用域是窗口级的，也就是说不同窗口之间保存的 sessionStorage 数据是不能共享的。

特点：

sessionStorage 的数据只存在于当前浏览器的标签页
数据在页面刷新后依然存在，但在关闭浏览器标签页之后数据就会被清除
与 localStorage 拥有统一的 API 接口
对数据的操作是同步的

4.IndexedDB

一种底层 API，用于客户端存储大量结构化数据，包括文件、二进制大型对象。该 API 使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太好用。IndexedDB 提供了一个解决方案。

特点：

存储空间大：存储空间可以达到几百兆甚至更多
支持二进制存储：它不仅可以存储字符串，而且还可以存储二进制数据
IndexedDB 有同源限制，每一个数据库只能在自身域名下能访问，不能跨域名访问
支持事务型：IndexedDB 执行的操作会按照事务来分组的，在一个事务中，要么所有的操作都成功，要么所有的操作都失败
键值对存储：IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以 “键值对” 的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误
数据操作是异步的：使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序

例：

var dbName = "my_db";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // 错误处理
};

request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 建立一个对象仓库来存储我们客户的相关信息，我们选择 ssn 作为键路径（key path）
  // 因为 ssn 可以保证是不重复的
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // 建立一个索引来通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引
  objectStore.createIndex("name", "name", { unique: false });

  // 使用邮箱建立索引，我们确保客户的邮箱不会重复，所以我们使用 unique 索引
  objectStore.createIndex("email", "email", { unique: true });

  // 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
  objectStore.transaction.oncomplete = function(event) {
    // 将数据保存到新创建的对象仓库
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach(function(customer) {
      customerObjectStore.add(customer);
    });
  };
};