浏览器存储cookie、webStorage、IndexedDB

cookie与web storage

存储方式	作用与特性	存储数量及大小	api
cookie	● 存储用户信息，获取数据需要与服务器建立连接。  ● 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。  ● 可设置过期时间。	● 最好将cookie控制在4095B（4kb）以内，超出的数据会被忽略。	原生、$.cookie（详见上文）
localStorage	● 存储客户端信息，无需请求服务器。  ● 数据永久保存，除非用户手动清理客户端缓存。  ● 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。	// 保存数据到 localStorage  localStorage.setItem(‘key’, ‘value’);  // 从 localStorage 获取数据  let data = localStorage.getItem(‘key’);  // 从 localStorage 删除保存的数据  localStorage.removeItem(‘key’);  // 从 localStorage 删除所有保存的数据  localStorage.clear();
sessionStorage	● 存储客户端信息，无需请求服务器。  ● 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	同localStorage	// 保存数据到 sessionStorage  sessionStorage.setItem(‘key’, ‘value’);  // 从 sessionStorage 获取数据  let data = sessionStorage.getItem(‘key’);  // 从 sessionStorage 删除保存的数据  sessionStorage.removeItem(‘key’);  // 从 sessionStorage 删除所有保存的数据  sessionStorage.clear();

web storage的优势

• 可存储的数据量大了4kb-5M
• api更友好了

web storage不足：

• 数据结构类型
• 大小（大数据量、离线应用serviceWork）

sessionStorage.setItem('age', 18);
const age = sessionStorage.getItem('age');
typeof age

IndexedDB简介

MDN官网是这样解释Indexed DB的：

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB特点

（1） 非关系型数据库(NoSql)

我们都知道MySQL等数据库都是关系型数据库，它们的主要特点就是数据都以一张二维表的形式存储，而Indexed DB是非关系型数据库，主要以键值对的形式存储数据。

（2）持久化存储

cookie、localStorage、sessionStorage等方式存储的数据当我们清楚浏览器缓存后，这些数据都会被清除掉的，而使用IndexedDB存储的数据则不会，除非手动删除该数据库。

（3）异步操作

IndexedDB操作时不会锁死浏览器，用户依然可以进行其他的操作，这与localstorage形成鲜明的对比，后者是同步的。

（4）支持事务

IndexedDB支持事务(transaction)，这意味着一系列的操作步骤之中，只要有一步失败了，整个事务都会取消，数据库回滚的事务发生之前的状态，这和MySQL等数据库的事务类似。

（6）同源策略

IndexedDB同样存在同源限制，每个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（7）存储容量大

这也是IndexedDB最显著的特点之一了，这也是不用localStorage等存储方式的最好理由。

IndexedDB重要概念讲解

1. 仓库objectStore

IndexedDB没有表的概念，它只有仓库store的概念，大家可以把仓库理解为表即可，即一个store是一张表。

2. 索引index

在关系型数据库当中也有索引的概念，我们可以给对应的表字段添加索引，以便加快查找速率。在IndexedDB中同样有索引，我们可以在创建store的时候同时创建索引，在后续对store进行查询的时候即可通过索引来筛选，给某个字段添加索引后，在后续插入数据的过成功，索引字段便不能为空。

3. 游标cursor

游标是IndexedDB数据库新的概念，大家可以把游标想象为一个指针，比如我们要查询满足某一条件的所有数据时，就需要用到游标，我们让游标一行一行的往下走，游标走到的地方便会返回这一行数据，此时我们便可对此行数据进行判断，是否满足条件。

【注意】：IndexedDB查询不像MySQL等数据库方便，它只能通过主键、索引、游标方式查询数据。

4. 事务

IndexedDB支持事务，即对数据库进行操作时，只要失败了，都会回滚到最初始的状态，确保数据的一致性。

IndexedDB实操

/**
 * 打开/创建数据库
 * @param {string} dbName 数据库名称
 * @param {number} version 数据库版本
 * @returns 
 */
function openDB(dbName, version = 1) {
  return new Promise((resolve, reject) => {
    let db; // 存储数据库对象
    //打开数据库，如果没有就是创建操作
    const request = indexedDB.open(dbName, version);
    //数据库打开或者创建的时候
    request.onsuccess = function (event) {
      db = event.target.result;
      console.log("数据库打开成功");
      resolve(db);
    };
    //打开失败
    request.onerror = function (event) {
      console.log("数据库打开失败");
    };
    //数据库发生更新的时候
    //1.版本号更新 2.添加或者删除了表（对象仓库）的时候
    //当我们第一次调用open方法时，会触发这个事件
    request.onupgradeneeded = function (event) {
      console.log("数据库需要更新");
      db = event.target.result;
      //创建一个对象仓库（表），用于存储数据
      let objectStore = db.createObjectStore("stu", {
        keyPath: "stuId",//主键
        autoIncrement: true//自增
      });
      //创建索引,有了索引之后，查询速度大大增快
      objectStore.createIndex("stuId", "stuId", { unique: true });
      objectStore.createIndex("stuName", "stuName", { unique: false });
      objectStore.createIndex("stuAge", "stuAge", { unique: false });
    };
  }); 
}
/**
 * 关闭数据库
 * @param {object} db 数据库实例
 */
function closeDB(db) {
    db.close();
    console.log('数据库已关闭');
}
/**
 * 删除数据库
 * @param {string} dbName 数据库名称
 */
function deleteDB(dbName) {
    console.log(dbName);
    const deleteRequest = window.indexedDB.deleteDatabase(dbName);
    deleteRequest.onerror = function (event) {
      console.log("删除数据库失败");
    }
    deleteRequest.onsuccess = function (event) {
      console.log("数据库删除成功");
    }
    
}
/**
 * 新增数据
 * @param {object} db 数据库实例
 * @param {string} storeName 数据仓库名称
 * @param {*} data 数据
 */
function addData(db, storeName, data) {
    const request = db.transaction([storeName], "readwrite")//事物   
    .objectStore(storeName)//获取仓库
    .add(data);//添加数据
    request.onsuccess = function (event) {
      console.log("数据添加成功");
    }
    request.onerror = function (event) {
      console.log("数据添加失败");
    }
}
/**
 * 通过主键来读取数据
 * @param {object} db 数据库实例
 * @param {*} storeName 数据仓库名称
 * @param {*} key 主键
 */
function getDataByKey(db, storeName, key) {
    return new Promise((resolve, reject) => {
        const request = db.transaction([storeName], "readonly")
        .objectStore(storeName)
        .get(key)

        request.onsuccess = function (event) {
            resolve(request.result);
        }
        request.onerror = function (event) {
            console.log('数据查询失败');
            
        }
    })
}
/**
 * 获取全部数据
 * @param {object} db 数据库实例
 * @param {*} storeName 数据仓库名称
 * @returns 
 */
function getAllData(db, storeName) {
    return new Promise((resolve, reject) => {
        const request = db.transaction([storeName], "readonly")
        .objectStore(storeName)
        .getAll()
        request.onsuccess = function (event) {
            resolve(request.result);
        }
        request.onerror = function (event) {
            console.log('数据查询失败');
        }
    })
}