HTML5 ウェブストレージ

HTML ローカル ストレージ: Cookie よりも優れています。

HTML ローカル ストレージとは何ですか?

ローカル ストレージ (ローカル ストレージ) を通じて、Web アプリケーションはデータをユーザーのブラウザにローカルに保存できます。

HTML5 が登場する前は、各サーバー リクエストを含むアプリケーション データは Cookie にのみ保存できました。 ローカル ストレージはより安全であり、Web サイトのパフォーマンスに影響を与えることなく大量のデータをローカルに保存できます。

Cookie とは異なり、ストレージ制限ははるかに大きく (少なくとも 5MB)、情報はサーバーに送信されません。

オリジン経由 (ドメインおよびプロトコル経由) のローカル ストレージ。 すべてのページは、オリジンから同じデータを保存し、アクセスできます。

ブラウザのサポート

表内の配列は、ローカル ストレージを完全にサポートする最初のブラウザのバージョンを示しています。

HTML ローカル ストレージ オブジェクト

HTML ローカル ストレージは、クライアント側でデータを保存するための 2 つのオブジェクトを提供します。

• window.localStorage - 有効期限なしでデータを保存する
• window.sessionStorage - セッションのデータを保存します（ブラウザのタブを閉じるとデータは失われます）

ローカル ストレージを使用する場合は、ブラウザの localStorage と sessionStorage のサポートを確認してください。

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorageのコード
} else {
    // ウェブストレージはサポートされていません ..
}

localStorage オブジェクト

localStorage オブジェクトには、有効期限のないデータが保存されます。 データはブラウザを閉じても削除されず、次の日、週、または年間利用できます。

例

//ストレージ
localStorage.setItem("lastname", "Gates");
//取り返す
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

自分で試してみてください

説明例:

• localStorage の名前と値のペアを作成します。name="lastname"，value="Gates"
• "lastname"の値を取得し、id="result"を使用して要素に挿入します。

上記の例は次のように書くこともできます:

//ストレージ
localStorage.lastname = "Gates";
//取り返す
document.getElementById("result").innerHTML = localStorage.lastname;

「lastname」localStorage アイテムを削除するための構文は次のとおりです。

localStorage.removeItem("lastname");

注: 名前と値のペアは常に文字列として保存されます。 必要に応じて、忘れずに他の形式に変換してください。

次の例では、ユーザーがボタンをクリックした回数をカウントします。 コードでは、値の文字列が数値に変換され、カウントが増加します。

例

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "このボタンをクリックしました " +
localStorage.clickcount + " 回。";

自分で試してみてください

sessionStorage オブジェクト

sessionStorage オブジェクトは localStorage オブジェクトと同等ですが、1 つのセッションのみがデータを保存する点が異なります。 ユーザーが特定のブラウザタブを閉じた場合にもデータは削除されます。

次の例では、現在のセッションでユーザーがクリックしたボタンをカウントします。

例

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "このセッション中に、このボタンをクリックしました " +
sessionStorage.clickcount + " 回。";

自分で試してみてください