IndexedDB-极速本地存储：浏览器中的超级数据库

最新推荐文章于 2024-10-04 00:46:18 发布

我码玄黄

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量622

点赞数 11

分类专栏：前端教你一招思维的火花文章标签：前端 JavaScript IndexedDB

本文链接：https://blog.csdn.net/qq_30333063/article/details/141711299

版权

教你一招同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

思维的火花

61 篇文章 3 订阅

订阅专栏

前端

38 篇文章 0 订阅

订阅专栏

IndexedDB-极速本地存储：浏览器中的超级数据库

前言

在当今的网络应用开发领域，数据的存储与处理扮演着核心角色。

随着应用功能的不断扩展，传统的数据存储方法，例如 Cookies 和 LocalStorage ，开始显得力不从心。

此时，IndexedDB 以其作为浏览器端的高效结构化数据存储接口，开始成为开发者的新宠。

它提供了一种更加强大和灵活的方式来管理和存储大量数据，以支持现代 Web 应用的需求。

IndexedDB 简介

IndexedDB 是一种客户端的数据库技术，它允许网页应用在用户的浏览器上本地存储大量数据。

这种技术使得数据可以被高效地以键值对的形式组织和检索，而不需要通过互联网与远程服务器进行交互。

通过 IndexedDB ，开发者可以创建一个持久化的数据存储，用于缓存、离线访问或者任何需要在用户设备上直接处理数据的场景。

存储解决方案比较

Web 开发中，我们有三种核心的 API 来在浏览器中管理数据存储：

Cookies

这是一种在浏览器中保存数据的方式，每个 Cookie 的大小被限制在 4KB 以内。

通常，服务器在响应请求时会通过一个 SET-COOKIE 的头部信息来告诉浏览器存储某个键值对。

当浏览器再次向服务器发起请求时，会自动携带这些 Cookie ，帮助服务器识别用户会话。

但要注意，Cookies 通常设置为 HTTP-Only ，这意味着它们不能被客户端脚本访问，因此它们并不适合用来存储需要在客户端访问的离线数据。

LocalStorage 和 SessionStorage

这两种是浏览器内置的键值存储方式，每个存储项可以有高达 5MB 的空间。

LocalStorage 存储的数据会保留直到被明确删除，而 SessionStorage 则在浏览器关闭时自动清除数据。

两者的 API 操作基本相同，例如，可以使用 window.localStorage.setItem("Key", "Value") 来存储数据，使用 window.localStorage.getItem("Key") 来检索数据。

不过，LocalStorage 的 API 是同步的，频繁使用可能会阻塞浏览器的其他操作。

IndexedDB

这是一个功能强大的浏览器内嵌数据库，它没有存储空间的限制，并且支持异步数据访问，这使得它非常适合处理复杂数据操作，而不会对浏览器的渲染和其他操作造成阻塞。

在这些存储选项中，LocalStorage 更适合处理简单的数据操作和存储小量数据。

而对于需要处理更复杂数据或需要异步访问数据的场景，IndexedDB 往往是更合适的选择。

浏览器兼容性

方法封装

安装 idb 工具类

yarn add idb

封装的增删改查接口

import { openDB } from 'idb';

class IndexedDBService {
    constructor(dbName) {
        this.dbPromise = openDB(dbName, 1, {
            upgrade(db) {
                if (!db.objectStoreNames.contains('users')) {
                    db.createObjectStore('users', { keyPath: 'id' });
                }
            },
        });
    }

    async addUser(user) {
        const db = await this.dbPromise;
        await db.add('users', user);
        return user.id;
    }

    async getUser(id) {
        const db = await this.dbPromise;
        return await db.get('users', id);
    }

    async updateUser(user) {
        const db = await this.dbPromise;
        await db.put('users', user);
        return 200;
    }

    async deleteUser(id) {
        const db = await this.dbPromise;
        await db.delete('users', id);
    }

    async getAllUsers(query) {
        const pageSize = 10000;
        const page = 1;
        const db = await this.dbPromise;
        const tx = db.transaction('users', 'readonly');
        const store = tx.objectStore('users');
        const allUsers = await store.getAll();

        // 模糊查询
        const filteredUsers = allUsers.filter(user =>
          user.name.toLowerCase().includes(query.toLowerCase())
        );

        const total = filteredUsers.length;
        const pageCount = Math.ceil(total / pageSize);

        // 分页
        const paginatedUsers = filteredUsers.slice(
          (page - 1) * pageSize,
          page * pageSize
        );

        return {
            total,
            data: paginatedUsers,
            pageCount
        };
    }
}

export default new IndexedDBService('my-database', 'users');

方法使用

//列表带查询分页
const list = async (search = '') => {
  const data = await IndexedDBService.getAllUsers(search)
}
//新增
const add = async () => {
    const newItem = { id: '随机id', name: '名称', 
    await IndexedDBService.addUser(newItem)
}
//修改
const update = async (id) => {
    const data = await IndexedDBService.getUser(id)
    data.name = '123123'
    await IndexedDBService.updateUser(data)
}
//删除
const deleteItem = async (id) => {
    await IndexedDBService.deleteUser(id)
}