HTMLWebストレージAPI
HTMLWebストレージ; クッキーよりも優れています。
HTML Webストレージとは何ですか？
Webストレージを使用すると、Webアプリケーションはユーザーのブラウザ内でデータをローカルに保存できます。
HTML5以前は、アプリケーションデータはすべてのサーバーリクエストに含まれるCookieに保存する必要がありました。Webストレージはより安全であり、Webサイトのパフォーマンスに影響を与えることなく、大量のデータをローカルに保存できます。
Cookieとは異なり、ストレージの制限ははるかに大きく（少なくとも5MB）、情報がサーバーに転送されることはありません。
Webストレージはオリジンごと（ドメインおよびプロトコルごと）です。1つのオリジンからのすべてのページは、同じデータを保存してアクセスできます。
ブラウザのサポート
表の数字は、WebStorageを完全にサポートする最初のブラウザバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTMLWebストレージオブジェクト
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オブジェクト
オブジェクトは、
1つのセッションのデータのみを格納することを除いsessionStorageて、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.";