介绍

这篇博客文章来自我当前的项目，我不希望服务器端DB用于用户跟踪或出于任何其他目的，但仍然想为用户保存所有内容。在进行一些基础研究时，我必须在localStorage和Indexed DB之间进行选择。两者都有自己的好处和缺点，但是对于我的用例中，我必须存储可能超过localStorage允许的数据大小的数据。当我开始阅读有关IndexedDB的更多信息时，我发现了dexie，它是IndexedDB周围的包装器，它必须符合API的质量来查询IndexedDB。还有一件事，IndexedDB在工人中得到了支持，这是您拥有客户端数据管理时最好的事情。

资源

• Dexie
• Web Workers
• Svelte & Kit

先决条件

• 带有软件包管理器pnpm的nodejs。
• 新的或现有的Sveltekit项目
• 现在安装Dexie

pnpm i dexie

设置Dexie

我正在使用Typescript，并且不是必须使用ts。

• 在lib目录中创建一个db.ts文件。
• 当我使用TypeScript时，我必须为表提供interface。

export interface favorite {
    id: string;
    name: string;
    image: string;
    description: string;
    slug: string;
}

所以在这里，我创建了一个带有ID，名称，图像，描述和slug的favorite接口。这些也将用于表列。

• 在确定表列后，我们需要创建一个dexie实例，但是当我们使用时，我们必须以不同的方式进行操作（对于JS，您可以直接启动它）。

import Dexie, { type Table } from 'dexie';


export class MyDexieExtension extends Dexie {

    favorite!: Table<favorite>;

    constructor() {
        super('myData.db');
        this.version(1).stores({
            favorite: '&id, name, image, description, slug',
        });
    }
}

在这里，我已经扩展了Dexie，因此我们可以使用Typescript Autocomplete和事物。

• favorite!: Table<favorite>;添加了查询的打字稿支持。

• favorite: '&id, name, image, description, slug'，在这里，我们有一些特殊字符，例如&，这些字符定义了主键，并且还有其他类似的字符可以使事情变得简单。请检查dexie文档。

• 创建db后，我们需要做的就是查询它，而Dexie wast at api。在这里，我要展示一些基本的一个，最后一个是针对Svelte Lovers的。

  注意：检查browser或onMount后使用浏览器特定的API，仅在浏览器中可用。
  

import {db} from "$lib/db"

// Insert query
await db.favorite.add({
id: 'dfghg2334w',
name: 'The Ether',
image: 'url',
description: 'Web Dev'
slug: 'dfghg2334w-the-ether'
})

// Update Query
await db.favorite.put({
id: 'dfghg2334w',
name: 'Shivam Meena'
})

// Delete Query
await db.favorite.delete('dfghg2334w')

您可以看到查询有多容易。

• 好吧，现在是Svelte和Dexie的最好部分。 Svelte在JS World中拥有最好的stores，而dexie为我们提供了一些东西。 liveQuery：

<script>
  import { liveQuery } from "dexie";
  import { db } from "$lib/db";

  let favorites = liveQuery(
    () => db.favorite.toArray()
  );

</script>
<ul>
  {#if $favorites}
    {#each $favorites as favorite (favorite.id)}
      <li>{favorite.name}, {favorite.slug}</li>
    {/each}
  {/if}
</ul>

您可以正确地理解它，但它不是基于Svelte Store，而是基于可观察的。有关更多API，请检查Dexie API Reference。

现在，我的应用程序没有在服务器上收集他们的数据。浏览器已经变得像OS一样大，我们可以做任何想做的事情。

这是一个很好的方法，但是在浏览器中保存数据的缺点，因此请在将它们添加到您的项目中之前了解它们。

直到下一篇文章过着美好的生活，学习和尊重。

这是我为你写的。如果您想问或建议任何建议，请发表评论并表现出一些爱。