HTML5 Web Storage

1. HTML ウェブストレージとは？

HTML ウェブストレージ (Web Storage) を使用すると、Web アプリケーションはユーザーのブラウザ内にデータをローカルに保存できます。

HTML5 より前は、アプリケーションデータは Cookie に保存されていました。Cookie は、その後のすべてのサーバーリクエストに含まれるため、パフォーマンスが低下する要因となっていました。ウェブストレージはよりセキュアであり、サーバーのパフォーマンスに影響を与えることなく大量のデータをローカルに保存することが可能です。

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

ウェブストレージはオリジン（ドメインとプロトコルごと）ごとに固有です。あるオリジンのすべてのページは、同じデータを保存し、アクセスすることができます。

2. ブラウザのサポート状況

各ブラウザにおける Web Storage API のサポート状況は以下の通りです。

3. HTML ウェブストレージオブジェクト

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

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

ウェブストレージを使用する前に、ブラウザのサポートを確認することをお勧めします。

if (typeof(Storage) !== "undefined") {
  // localStorage / sessionStorage を使用したコード
} else {
  // ウェブストレージをサポートしていないブラウザへの対応
}

4. localStorage オブジェクト

localStorage オブジェクトは、有効期限のないデータを保存します。ブラウザを閉じてもデータは削除されず、翌日でも、翌年でも、あるいは数年後でも利用可能です。

// データの保存
localStorage.setItem("lastname", "スミス");

// データの取得
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

4.1 コードの解説

1. localStorage.setItem("lastname", "スミス") で、"lastname" という名前のキーに "スミス" という値を保存します。
2. localStorage.getItem("lastname") で、"lastname" に紐づく値を取得し、ID が "result" の要素に表示します。

上記の例は以下のように書くことも可能です。

// データの保存
localStorage.lastname = "スミス";
// データの取得
document.getElementById("result").innerHTML = localStorage.lastname;

4.2 データの削除

特定の項目を削除したり、すべてのデータをクリアしたりするには以下のメソッドを使用します。

// "lastname" キーの項目を削除
localStorage.removeItem("lastname");

// 全てのストレージ内容を削除
localStorage.clear();

       注意: キーと値は常に文字列 (String) として保存されます。数値を保存する場合、取得時に適切な型に変換（キャスト）する必要がある点に注意してください。

以下の例は、ユーザーがボタンをクリックした回数をカウントするプログラムです。ここでは値を数値に変換して計算しています。

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

5. sessionStorage オブジェクト

sessionStorage オブジェクトは、localStorage オブジェクトと同じメソッドを持ちますが、データの保持期間が異なります。

sessionStorage は 1 つのセッションに対してのみデータを保存します。ユーザーが特定のブラウザタブを閉じると、そのデータは自動的に消去されます。

以下の例は、現在のセッションにおけるボタンのクリック回数をカウントするものです。

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

6. Web Storage API のメソッドとプロパティ

Web Storage を操作するための主要な API は以下の通りです。