# 使用 idb-kayval 作为前端数据存储

- Link: https://www.ixiqin.com/2024/03/22/using-idb-kayval-as-front-end-data-storage/
- Published: 2024-03-22T23:14:19+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2024/03/22/using-idb-kayval-as-front-end-data-storage/#)

 * [关于 Indexed DB](https://www.ixiqin.com/2024/03/22/using-idb-kayval-as-front-end-data-storage/#%e5%85%b3%e4%ba%8e_indexed_db)
 * [开发使用建议](https://www.ixiqin.com/2024/03/22/using-idb-kayval-as-front-end-data-storage/#%e5%bc%80%e5%8f%91%e4%bd%bf%e7%94%a8%e5%bb%ba%e8%ae%ae)
 * [用法](https://www.ixiqin.com/2024/03/22/using-idb-kayval-as-front-end-data-storage/#%e7%94%a8%e6%b3%95)
 * [使用前后的效果](https://www.ixiqin.com/2024/03/22/using-idb-kayval-as-front-end-data-storage/#%e4%bd%bf%e7%94%a8%e5%89%8d%e5%90%8e%e7%9a%84%e6%95%88%e6%9e%9c)

在前端留存一些状态，是在前端场景下提升性能的常规操作。最近我有一个场景需要在前端
留存一个状态，借着这个机会，试了试 [IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)
来作为数据存储，拓展一下新的方向。

## 关于 Indexed DB

Chrome 在中提供了多种不同的存储，按下 F12 ，打开 DevTools ，找到应用 – 存储，你就
会看到目前 Chrome 支持的多种存储方式。常用的主要就是本次存储空间（Local Storage）、
会话存储空间（Session Storage）和 Indexed DB。这次我用的便是 Indexed DB。

![](https://files.ixiqin.com/2024/03/23062235/d2b5ca33bd970f64a6301fa75ae2eb22-1-
697x1024.png)

## 开发使用建议

由于 Indexed DB 提供的 API 整体比较裸，在实际应用开发时，可能并不好用，你可以根据
自己的需要，选择使用不同的第三方开发库来开发你的应用。在这篇文章中，我使用了 [idb-keyval](https://github.com/jakearchibald/idb-keyval)
来作为我的开发库。

![](https://files.ixiqin.com/2024/03/23062235/d2b5ca33bd970f64a6301fa75ae2eb22-3-
414x1024.png)

## 用法

首先，使用 `yarn add idb-keyval` 来安装依赖，安装完成后，可以参考如下代码来在你的
项目中引入 indexedDB.

    ```php
    import { set,get,keys } from 'idb-keyval';


    // 下面演示了一个 get_books 函数，会将内容存储在 IndexedDB 的 your-keys 当中。
    // 如果存在缓存，则直接使用缓存，不存在，则进行数据获取
    function get_books(){
       // 使用 keys 获取当前 IndexedDB 当中的所有 Key，用于判断当前是否有缓存结果。
       const exists_keys = await keys();
       if(exists_keys.indexOf('your-keys') !== -1){
        console.log("use cached glossary")
        return await get('your-keys');
       }

       // fetch data
       let data = fetch_data();

       await set('your-keys',data)
       return data;
    }
    Code language: PHP (php)
    ```

## 使用前后的效果

在性能上，使用 Indexed DB 之后，根据你的数据获取的难度，会有不同的性能提升。比如
这里我不使用缓存，单次数据获取需要花费 800ms，借助于 Indexed DB，时间可以被控制在
10ms 以内，从而得到一个不错性能。

![](https://files.ixiqin.com/2024/03/23062235/d2b5ca33bd970f64a6301fa75ae2eb22-2-
1024x541.png)