HTML ローカル・ストレージは、クッキーよりも優れています。
ローカル・ストレージによって、web アプリケーションは、ユーザのブラウザ内にデータをローカルに保存できます。
HTML5 より前は、アプリケーションデータは、すべてのサーバリクエストに含まれるクッキーに格納しなければなりませんでした。 ローカルストレージは、web サイトのパフォーマンスに影響を与えることなく、より安全で、かつ大量のデータをローカルに保存する ことができます。
クッキーとは異なり、ストレージの限度は非常に大きく（少なくとも5MB）、情報がサーバに転送されることはありません。
ローカルストレージは、ドメインごとです。1ドメインからの全ページは、同じデータを格納し、アクセスすることができます。
表中の数字は、完全にローカル・ストレージをサポートした最初のブラウザのバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| Web ストレージ | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML ローカル・ストレージは、クライアントにデータを格納するための、新しい2つのオブジェクトを提供します：
ローカル・ストレージを使用する前に、ブラウザが localStorage と sessionStorage をサポートしているかチェックします:
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
localStorage オブジェクトは、有効期限のないデータを格納します。データは、ブラウザを閉じたときにも削除されず、 次の日、次の週、次の年でも利用できます。
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
例の説明：
上の例は、次のようにも書くことができます：
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
localStorage 項目の "lastname" を削除する構文は次の通りです：
localStorage.removeItem("lastname");
注: 名前/値のペアは、常に文字列として格納されます。 必要に応じ、他のフォーマットに変換することを忘れないでください！
次の例は、ユーザがボタンをクリックした回数をカウントします。 このコードでは、カウンタを増分できるように、値の文字列を数値に変換します：
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
sessionStorage オブジェクトは、1 セッションだけのデータを保存することを除き、 localStorageオブジェクトに同じです。ユーザが、ブラウザウィンドウを閉じるとデータは削除されます。
次の例は、ユーザが現在のセッションで、ボタンをクリックした回数をカウントします：
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";