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

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

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

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

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

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ストレージを使用すると、localStorageに似たより直感的なAPIが提供されます。また、サードパーティの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関数を更新して、localStorage.setItem()の代わりにstorage.set()を使用できるようにします。

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

  loadedTodos = [...loadedTodos, todo];

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

loadTodos関数は、localStorage.getItem()の代わりにstorage.get()を使用します。

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

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

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

最後に、localStorage.removeItem()の代わりにstorage.delete()を使用することで、clearTodos機能を改善できます。

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;

私たちのアプリケーションは再び動作しますが、[X32X]

getdocs

8684