WebストレージAPI

データベースは、いくつかのデータを格納し、後でそれらを取得したいときにアプリケーションで重要なソフトウェアです.しかし、時々、我々はちょうどバックエンドに役に立たないいくつかの一時的なデータを保存することができて、問題を持たずに失われることができます.この場合、NOSQLまたはSQLデータベースでこれを保存することは、overkillすることができます.これは典型的な場合は、WebストレージAPIは素晴らしいことができます.でもなんだろう?使い方は?
それが私たちがこの記事で話すつもりです.

何ですか.
WebストレージAPIは、ブラウザにいくつかのキー/値データを格納する方法を提供します.
これらのデータは起源によって格納されるので、他の起源からデータを取得/更新/削除することはできません.
データを格納するには2通りあります.

localStorage

sessionStorage

この2つのメカニズムは、私たちが記事の後で見るつもりである同じAPIを持っています.
これらの2つのメカニズムの違いは何ですか?
違いは、データが格納される期間です.あなたが使うときlocalStorage , データをJSまたはユーザーがキャッシュをクリアするまで保存されます.
反対にsessionStorage これはセッションのデータを格納します.つまり、ユーザーがブラウザのタブを閉じるときに削除されます.
注意するいくつかのプロパティ

データをシリアル化する必要がある

最大サイズは約5 MBです

常に同期

データ保護はない

Webワーカーズでは使用できません

いつ使用するか.
LocalStorageとSessionStorageが役に立つ多くのユースケースがあります.ここでいくつかをリストします.

私の選択を覚えている:確認する必要があるアクションの後、それが自動的に次の同じアクションを確認するための選択を与えるためにユーザーフレンドリーです.

暗いテーマ:あなたが暗いテーマを作るとき、ユーザーがあなたのウェブサイトに入る最初の時、あなたは彼のシステムからテーマの好みを得ます.それにもかかわらず、彼はテーマを変更することを選択することができますので、次の時間のための彼の選択を覚えてみましょう.

ユーザーがあなたが保つために選んだ何でも(もちろん失われることができるもの)

SessionStorageで前の検索をしてください:ユーザーがあなたが同じセッションの間、前にフィルタをすることができる出品ページに戻るとき、そのおかげで.
...

使い方は?
Storage API
APIは同じですsessionStorage and localStorage . それはStorage API

setItem(key, value) : ストレージに項目を追加します.キーが既に存在するならば、それは前の値を上書きします.

getItem(key) : キーに対応する値を取得します.キーが存在しない場合はnull .

removeItem(key) : ストレージの渡されたキーを削除する

clear() : 現在のドメイン名のストレージのすべてのエントリを削除します.

key(index) : 指定したインデックスの値を取得します.このインデックスにキーがない場合、

length : ストレージ内の値の数を取得します.

さて、アクションで作業を見てみましょうlocalStorage :

// Put "dark" for the key "theme_mode"
localStorage.setItem("theme_mode", "dark");

// Put "light" for the key "theme_mode"
localStorage.setItem("theme_mode", "light");

// Will print
// The current theme mode is: "light"
console.log(
  "The current theme mode is:",
  localStorage.getItem("theme_mode")
);

// Will print:
// The value in localStorage at the index 0 is: light
console.log(
  "The value in localStorage at the index 0 is:",
  localStorage.key(0)
);

// Remove the entry for "theme_mode"
localStorage.removeItem("theme_mode");

// Remove all values in localStorage
localStorage.clear();

Note: It's also possible to manipulate the data like you will do with a "simple" object:

// Set the value "dark" for "them_mode"
localStorage.theme_mode = "dark";

// Will print
// The current value of the theme mode is: dark
console.log(
  "The current value of the theme mode is:",
  localStorage.theme_mode
);

// Remove the entry corresponding to "theme_mode"
delete localStorage.theme_mode;

この場合、キーが存在しない場合はundefined (not null ライクgetItem ). また、すべての値をループせずにすべての値をすばやく削除する方法はありません.

Note: The MDN encourages us not to use direct properties but to prefer the Storage API.

storage イベント
変更を聞くことが可能ですlocalStorage イベントのおかげで他のページでstorage . コールバックでは次のようになります.

key : で変更されたエントリのキーlocalStorage .

newValue : 新しい値.

oldValue : 古い値.

Note: An event is send only when the value has changed.

いつ役に立つのですか.
これは、ユーザーが他のウィンドウでテーマを変更したかどうかを知るために使用することができます.
場合は、また、他のウィンドウのテーマを変更することができます場合はstorage イベント:)
これをコード化しましょう.

// Configure the `storage` event handler
window.addEventListener(
  "storage",
  ({ key, newValue, oldValue }) => {
    // Do whatever we want here
    // Probably first check the key received
  }
);

完全なコードは以下の通りです.

Note: To play with, open in a new window twice (on my computer I need to use browser's private mode, I'm investigate on the reason):

クロムdevtools
代わりにコンソールを使用して何を持って見てlocalStorage and sessionStorage 現在の起源については、devtoolのアプリケーションタブで直接見ることができます.


結論
WebストレージAPIでは、ブラウザに非敏感なデータを格納する2つの方法を提供しています.LocalStorageとSessionStorage.
両方の間の唯一の違いはデータがクリアされるときです、さもなければ、この2つのメカニズムの使用は同じですsetItem , getItem , removeItem or clear .
With localStorage 他のページのユーザーのブラウザで開いた変更を聞くことができます.聞くイベントはストレージです.
ユースケースは複数です.
例えば、dev . toは、ポストの編集された最後のバージョンを格納するために使用します.それで、あなたが保存なしであなたのブラウザーをリフレッシュするならば、あなたはちょうど編集したバージョンを得ます.何度か私の人生を救った——
私のサイトでは、CSS変数と組み合わせてテーマモードで使用します.
コーディングを楽しむ.
データをバックエンドに送りませんので、何らかの認証をしたい場合は、例えばJWTトークンを保存するためにcookie APIを使用する方を好みます.はい、私はそれについて次の記事を行います、恐れないでください.
より構造化されたデータをブラウザに保存する場合は、IndexXDBを使用することもできます.
コメントすることを躊躇しないでください、そして、あなたがより多くを見たいならば、あなたは私に続くことができるか、私のところに行くことができますWebsite .