江苏龙网

  1. 主页 > 生活百科 > >

聊一聊常见的浏览器数据存储方案( 五 )

数据存储

  • object store：相关数据项的 key/value 存储 。它类似于 MongoDB 中的集合或关系数据库中的表 。
  • key：用于引用 object store 中每条记录（值）的唯一名称 。它可以使用自动增量数字生成，也可以设置为记录中的任何唯一值 。
  • index：在 object store 中组织数据的另一种方式 。搜索查询只能检查 key 或 index 。
  • schema：object store、key 和 index 的定义 。
  • version：分配给 schema 的版本号（整数） 。IndexedDB 提供自动版本控制，因此可以将数据库更新到最新 schema 。
  • 操作：数据库活动，例如创建、读取、更新或删除记录 。

    • 聊一聊常见的浏览器数据存储方案

    文章插图
     
    （2）特点及使用场景indexedDB 特点如下：
    • 可以将任何 JavaScript 类型的数据存储为键值对，例如对象（blob、文件）或数组等 。
    • IndexedDB API 是异步的，不会在数据加载时停止页面的渲染 。
    • 可以存储结构化数据，例如 Date、视频、图像对象等 。
    • 支持数据库事务和版本控制 。
    • 可以存储大量数据 。
    • 可以在大量数据中快速定位/搜索数据 。
    • 数据库是域专用的，因此任何其他站点都无法访问其他网站的 IndexedDB 存储，这也称为同源策略 。
    IndexedDB 使用场景：
    • 存储用户生成的内容： 例如表单，在填写表单的过程中，用户可以离开并稍后再回来完成表单，存储之后就不会丢失初始输入的数据 。
    • 存储应用状态： 当用户首次加载网站或应用时，可以使用 IndexedDB 存储这些初始状态 。可以是登录身份验证、API 请求或呈现 UI 之前所需的任何其他状态 。因此，当用户下次访问该站点时，加载速度会增加，因为应用已经存储了状态，这意味着它可以更快地呈现 UI 。
    • 对于离线工作的应用： 用户可以在应用离线时编辑和添加数据 。当应用程序来连接时，IndexedDB 将处理并清空同步队列中的这些操作 。
    （3）IndexedDB 操作不同浏览器的 IndexedDB 可能使用不同的名称 。可以使用以下方法检查 IndexedDB 支持：
    const indexedDB =window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB ||window.shimIndexedDB;if (!indexedDB) {console.log("不支持 IndexedDB");}可以使用 indexedDB.open() 来连接数据库：
    const dbOpen = indexedDB.open('performance', 1);indexedDB.open 的第一个参数是数据库名称，第二个参数是可选的版本整数 。
    可以使用以下三个事件处理函数监听 indexedDB 的连接状态：
    ① onerror在无法建立 IndexedDB 连接时，将触发该事件：
    // 连接失败dbOpen.onerror = e => {reject(`IndexedDB error: ${ e.target.errorCode }`);};如果在无痕模式、隐私模式下运行浏览器，可能不支持 IndexedDB，需要禁用这些模式 。
    ② onupgradeneeded一旦数据库连接打开，就会触发 onupgradeneeded 事件，该事件可用于创建 object store 。
    dbOpen.onupgradeneeded = e => {const db = dbOpen.result;// 创建 object storeconst store = db.createObjectStore("cars", { keyPath: "id" });// 使用自动递增的id// const store = db.createObjectStore('cars', { autoIncrement: true });// 创建索引store.createIndex("cars_colour", ["colour"], {unique: true});// 创建复合索引store.createIndex("colour_and_make", ["colour", "make"], {unique: false,});};IndexedDB 使用了 object store 的概念，其本质上是数据集合的名称 。可以在单个数据库中创建任意数量的 object store 。keyPath是 IndexedDB 将用来识别对象字段名称，通常是一个唯一的编号，也可以通过 autoIncrement: true 来自动为 store 设置唯一递增的 ID 。除了普通的索引，还可以创建复合索引，使用多个关键词的组合进行查询 。
    ③ onsuccess在连接建立并且所有升级都完成时，将触发该事件 。上面我们已经新建了 schema，接下来就可以在onsuccess 中添加、查询数据 。
    // 连接成功dbOpen.onsuccess = () => {this.db = dbOpen.result;//1const transaction = db.transaction("cars", "readwrite");//2const store = transaction.objectStore("cars");const colourIndex = store.index("cars_colour");const makeModelIndex = store.index("colour_and_make");//3store.put({ id: 1, colour: "Red", make: "Toyota" });store.put({ id: 2, colour: "Red", make: "Kia" });store.put({ id: 3, colour: "Blue", make: "Honda" });store.put({ id: 4, colour: "Silver", make: "Subaru" });//4const idQuery = store.get(4);const colourQuery = colourIndex.getAll(["Red"]);const colourMakeQuery = makeModelIndex.get(["Blue", "Honda"]);// 5idQuery.onsuccess = function () {console.log('idQuery', idQuery.result);};colourQuery.onsuccess = function () {console.log('colourQuery', colourQuery.result);};colourMakeQuery.onsuccess = function () {console.log('colourMakeQuery', colourMakeQuery.result);};// 6transaction.oncomplete = function () {db.close();};};


    推荐阅读


    上一篇：空调不能一直制冷是什么原因,空调开始制冷一会就不制冷是什么原因-

    下一篇：什么是子域名？如何设置子域名解析？