HTML Webストレージ クッキーよりも優れています
HTML Web Storageとは?
Webストレージでは、Webアプリケーションはデータをユーザーのブラウザ内にローカルに保存できます。
HTML 5以前は、アプリケーションデータはすべてのサーバーリクエストに含まれるクッキーに保存されていました。
Webストレージはより安全で、Webサイトのパフォーマンスに影響を与えることなく大量のデータをローカルに保存できます。
Cookieとは異なり、記憶域の制限ははるかに大きく（少なくとも5MB）、情報がサーバーに転送されることはありません。
Webストレージはオリジン単位（ドメインおよびプロトコル単位）です。1つの場所からのすべてのページが、同じデータを保存してアクセスすることができます。
ブラウザのサポート
表内の数字は、Web Storageを完全にサポートする最初のブラウザバージョンを示しています。
| API | クローム | IE/エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|---|
| Web ストレージ | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Web ストレージオブジェクト
HTML Webストレージには、クライアントにデータを保存するための2つのオブジェクトがあります。
window.localStorage– 有効期限なしでデータを保存するwindow.sessionStorage– 1セッション分のデータを保存します（ブラウザのタブを閉じるとデータが失われます）
Webストレージを使用する前に、localStorageおよびsessionStorageのブラウザサポートを確認してください。
if (typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
localStorage オブジェクト
localStorageオブジェクトは、有効期限なしでデータを格納します。ブラウザを閉じてもデータは削除されず、翌日、週、または年の間、利用可能になります。
例文
// Store
localStorage.setItem(“lastname”, “Smith”);
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);
例の説明:
- name=”lastname” および value=”Smith”でlocalStorageの名前と値のペアを作成します。
- “lastname” の値を取得し、それを id=”result” の要素に挿入します
上記の例は、このように書くこともできます。
// Store
localStorage.lastname = “Smith”;
// Retrieve
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 = “You have clicked the button ” +
localStorage.clickcount + ” time(s).”;
sessionStorageオブジェクト
この sessionStorage オブジェクトはlocalStorageオブジェクトと同じですが、 1つのセッションのデータだけが格納される点が異なります。
tユーザーが特定のブラウザタブを閉じると、データは削除されます。
次の例では、現在のセッションでユーザーがボタンをクリックした回数を数えます。
例文
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.”;