組み込みのWebモジュール：KVストレージの使用方法

投稿日: 2022-04-20 2022-10-06
タグ: javascript

KV Storage のリリースは、Webプラットフォームにとって大きな問題です。これは標準ライブラリ提案の一部であり、JavaScript用に導入されているより広範な標準ライブラリを見ることができます。

whatにジャンプする前に kv-storage つまり、最初にブラウザ内にデータを保存する方法について説明しましょう。今すぐローカルデータを保存したい場合、私の主なオプションの1つは、localStorageを使用することです。

それを念頭に置いて、JavaScriptを利用した簡単なTodoアプリケーションを作成しましょう。 localStorage. 2つのファイルが必要です- index.html と main.js:

main.js

const TODOS_KEY = 'todos';
const ul = document.getElementsByTagName('ul')[0];

const showExistingTodos = todos => {
  if (todos.length > 0) {
    todos.map(todo => {
      addLi(todo);
    });
  }
};

const addTodo = () => {
  const input = document.getElementById('todoInput').value;

  if (input.length > 0) {
    addLi(input);
    saveTodo(input);

    document.getElementById('todoInput').value = '';
  }
};

const addLi = text => {
  const li = document.createElement('li');

  li.appendChild(document.createTextNode(text));

  ul.appendChild(li);
};

const saveTodo = todo => {
  let loadedTodos = loadTodos();

  loadedTodos = [...loadedTodos, todo];

  localStorage.setItem(TODOS_KEY, JSON.stringify(loadedTodos));
};

const loadTodos = () => {
  const todos = JSON.parse(localStorage.getItem(TODOS_KEY));

  return todos != null ? todos : [];
};

const clearTodos = () => {
  localStorage.removeItem(TODOS_KEY);

  const todos = Array.from(document.getElementsByTagName('li'));

  todos.map(todo => ul.removeChild(todo));
};

const todos = loadTodos();

showExistingTodos(todos);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <input id="todoInput" type="text" />  
    <button onclick="addTodo()">Add Todo</button>
    <button onclick="clearTodos()">Clear todos</button>
  </div>

  <ul>

  </ul>

  <script src="main.js"></script>
</body>
</html>

これは間違いなく改善される可能性がありますが、例として使用できるアプリケーションができました。 Todoアイテムをいくつか追加してからページを更新すると、すぐに表示されることがわかります。

うーん…調べてみたら localStorage 同期です。それは私たちのアプリケーションにとってどういう意味ですか？

基本的に、これは localStorage DOM内のレンダリングをブロックします。にたくさんの要素がある場合、これは問題を表す可能性があります localStorage パフォーマンスに大きな影響を与えます。

KVストレージ（キー/値ストレージ用）という名前の実験的な組み込みモジュールを見てみましょう。これは、非同期ストレージAPIであるIndexedDBに基づいて構築されています。

では、IndexedDBをネイティブに使用してみませんか？

KVストレージを使用すると、次のようなより直感的なAPIが得られます。 localStorage. また、サードパーティのIndexedDBライブラリを使用する必要はありません。これで、ブラウザ内から直接使用できるようになりました。

KVストレージ

この例では、Chrome内で実験機能を有効にする必要があります。 Chromeブラウザ内で、次のアドレスに移動します。

実験的なウェブプラットフォーム機能で「有効」を選択します： chrome：// flags /＃enable-experimental-web-platform-features。

また、すべての実験的/新しいWeb機能に ChromeCanaryを使用することをお勧めします。例として使用します。

次に、次の更新を実行する必要があります。

の中に index.html、輸入 main.js モジュールとして：

<script type="module" src="main.js"></script>

次に、更新できます saveTodo 使用する関数 storage.set() それ以外の localStorage.setItem()

const saveTodo = async todo => {
  let loadedTodos = await loadTodos();

  loadedTodos = [...loadedTodos, todo];

  await storage.set(TODOS_KEY, loadedTodos);
};

私たちの loadTodos 関数は使用します storage.get() それ以外の localStorage.getItem():

const loadTodos = async () => {
  const todos = await storage.get(TODOS_KEY);

  return todos != null ? todos : [];
};

ここで、 async/await関数を使用して非同期性を簡単に処理していることに注目してください。

最後に、私たちは私たちを改善することができます clearTodos を使用して機能する storage.delete() それ以外の localStorage.removeItem():

const clearTodos = () => {
  storage.delete(TODOS_KEY);

  const todos = Array.from(document.getElementsByTagName('li'));

  todos.map(todo => ul.removeChild(todo));
};

また、これらをに公開する必要があります window 物体：

window.addTodo = addTodo;
window.clearTodos = clearTodos;

私たちのアプリケーションは、しかしではなくで再び動作するようになりました localStorage それは使用します std:kv-storage 組み込みのWebモジュール。これについての最もよい事は？内部でIndexedDBを使用しています！

これは、すべてが非同期であることを意味します（ async と await 約束の呼び出しも）。

クライアントサポート

ブラウザがサポートしていない場合はどうなりますか kv-storage? 現時点では、これは非常に可能性が高いです。幸い、ここで利用可能なポリフィルがあります：https://github.com/GoogleChromeLabs/kv-storage-polyfill。

使用する予定がある場合は、これをアプリケーションに追加することをお勧めします kv-storage この段階で生産中です。

参考文献

Googleはデモを用意しました kv-storage あなたが読むのが面白いと思うかもしれないこと。 URLは次のとおりです： https://rollup-built-in-modules.glitch.me/

getdocs

13036