HTMLローカルストレージ

HTMLローカルストレージ：クッキーより優れています。

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

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

HTML5以前は、アプリケーションデータはクッキーにのみ保存でき、各サーバー要求に含まれていました。ローカルストレージはより安全で、サイトのパフォーマンスに影響を与えずに大量のデータをローカルに保存できます。

クッキーとは異なり、ストレージの制限ははるかに大きく（少なくとも5MB）、情報はサーバーに転送されません。

ローカルストレージはオリジン（origin）（ドメインとプロトコル）を通じてアクセスされます。すべてのページは、オリジンから、同じデータを保存およびアクセスできます。

ブラウザのサポート

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

API
Web Storage 4.0 8.0 3.5 4.0 11.5

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

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

  • window.localStorage - 期限なしのデータを保存します
  • window.sessionStorage - セッションごとにデータを保存します（ブラウザタブを閉じるとデータが消失します）

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

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage 関連のコード
} else {
    // ごめんなさい、Web Storage はサポートされていません ..
}

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 オブジェクトと同様ですが、セッションに対してのみデータを保存します。ユーザーが特定のブラウザタブを閉じると、データも削除されます。

以下は、現在のセッション中にユーザーのボタンクリックをカウントする例です：

例

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

実際に試してみる