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 + " 回。";

自分で試してみる