---
title: "@unikvs/indexeddb"
description: "@unikvs/indexeddb の Indexeddb。IndexedDB に任意の値を保存するストレージの使い方を説明します。"
---

## 概要 [#overview]

`@unikvs/indexeddb` ブラウザー専用 は IndexedDB に任意の値を保存するストレージです。構造化複製できる値や `Blob`・`File` を保存したい場合に使います。

- `name` は `Indexeddb` です。
- `open`・`close` が必要です。
- データベース名とストア名はコンストラクターで指定します。
- `Blob`・`File` は中間形式で保存し、読み戻し時に復元します。

インストールは次のコマンドで行います。

```package-install
npm install @unikvs/indexeddb
```

## 使い方 [#usage]

Indexeddb は IStorage を実装しています。UniKvs には persist() で渡します。

```ts
import { Indexeddb } from "@unikvs/indexeddb";
```

コンストラクターの引数は次のとおりです。

| Prop | Type | Default | Description |
| - | - | - | - |
| `dbName?` | `[#db-name] string` | `"unikvs_db"` | 使うデータベースの名前です。 |
| `storeName?` | `[#store-name] string` | `"kvs_store"` | 使うオブジェクトストアの名前です。 |

以下は、値を保存して読み戻す例です。

```ts
import { Indexeddb } from "@unikvs/indexeddb";
import * as unikvs from "unikvs";

const kvs = new unikvs.Builder<{
  greeting: unikvs.PlainValue<string>;
}>()
  .persist(new Indexeddb())
  .build();

await kvs.open();
await kvs.set("greeting", "hello");

const value = await kvs.get("greeting");
console.log(value); // "hello"

await kvs.close();
```

## データ型 [#data-types]

| 操作                                    | 対応するデータ型                      |
| --------------------------------------- | ------------------------------------- |
| `write`・`read`                         | 任意の値（`Blob`・`File` を含みます） |
| `getWritable`・`getReadable` のチャンク | `Uint8Array`                          |

- 任意の値を保存できます。IndexedDB の構造化複製に対応した値を扱います。
- `Blob`・`File` は中間形式で保存し、読み戻し時に復元します。`File` の名前と更新時刻も保持します。
- 存在しないキーに対する `delete` は成功し、`exists` は `false` を返します。
- ストリームのチャンクは `Uint8Array` です。
- `getWritable` で取得したストリームは、チャンクを結合し、`close` 時に保存します。
- `getWritable` で取得したストリームに `Uint8Array` 以外のチャンクを書き込むと `InvalidChunkTypeError` を投げます。
- `getReadable` で取得したストリームは、保存値を単一チャンクとして送出します。

## エラー [#errors]

このパッケージが投げるエラーは次のとおりです。

### InvalidChunkTypeError [#invalid-chunk-type-error]

| Prop | Type | Default | Description |
| - | - | - | - |
| `key` | `[#invalid-chunk-type-key] string` | - | 操作対象のキーです。 |
| `chunk` | `[#invalid-chunk-type-chunk] unknown` | - | 受け取ったチャンクの値です。 |
| `chunkType` | `[#invalid-chunk-type-chunk-type] string` | - | 受け取ったチャンクの型名です。 |

#### 意味

`getWritable` で取得したストリームに `Uint8Array` 以外のチャンクを書き込んだ場合に投げます。

#### 対処方法

ストリームには `Uint8Array` のチャンクを書き込んでください。

また、見つからないキーを読み取ると `NotFoundError` の `DOMException` が投げられ、未オープン時に操作すると `TypeError` が投げられます。