HTMLローカルストレージ、より良いcookies 。
HTMLローカルストレージとは何ですか？
ローカルストレージを使用すると、Webアプリケーションは、ユーザーのブラウザ内でローカルにデータを保存することができます。
HTML5の前に、アプリケーションデータは、に格納されなければならなかったcookies 、すべてのサーバー要求に含まれます。 ローカルストレージは、より安全で、かつ大量のデータは、ウェブサイトのパフォーマンスに影響を与えずに、ローカルに保存することができます。
異なりcookies 、ストレージの制限ははるかに大きい(at least 5MB)との情報がサーバに転送されることはありません。
ローカルストレージは、原点あたりで(per domain and protocol) 。 すべてのページは、1つの原点から、同じデータを保存し、アクセスすることができます。
ローカルとセッションストレージ
ウェブストレージは二つの異なる記憶領域-ローカルストレージとセッションストレージスコープと寿命が異なるを提供しています。
（同一生成元ポリシーに定義されているプロトコル、ホスト名、ポート番号の組み合わせ）をローカルストレージに配置されたデータは、原点ごとである（データは、以前のデータを記憶している同一の原点からのページからロードされたすべてのスクリプトに利用可能である）およびブラウザが閉じられた後に持続します。
セッションストレージごとの起源あたりのウィンドウやタブで、ウィンドウの寿命に制限されています。 セッションストレージは、同じWebアプリケーションの別のインスタンスが良くクッキーによってサポートされていないお互い、ユースケースと干渉することなく、異なるウィンドウで実行できるようにするためのものです。
ブラウザのサポート
表中の数字は、完全にローカルストレージをサポートする最初のブラウザのバージョンを指定します。
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTMLローカルストレージオブジェクト
HTMLローカルストレージは、クライアント上のデータを格納するための2つのオブジェクトを提供します。
- window.localStorage -有効期限なしで保存したデータ
- window.sessionStorage - 1つのセッションのデータを格納する（ブラウザのタブを閉じたときにデータが失われます）
ローカルストレージを使用する前に、チェック・ブラウザのサポート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"); »それを自分で試してみてください 例を説明します：
- 作成localStorageと名前/値ペアname="lastname"とvalue="Smith"
- 値を取得し"lastname"し、ID =「結果」を持つ要素に挿入
上記の例では、このように書くことができます：
// 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それが唯一つのセッションのデータを格納することを除いて 、オブジェクト。 ユーザーが特定のブラウザタブを閉じたときのデータが削除されます。
次の例では、現在のセッションで、ボタンをクリックしたユーザーの回数をカウントします。
例
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."; »それを自分で試してみてください