HTMLWebストレージ。クッキーよりも優れています。

HTMLWebストレージとは

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

HTML5より前は、アプリケーションデータはすべてのサーバーリクエストに含まれるCookieに保存する必要がありました。Webストレージはより安全で、Webサイトのパフォーマンスに影響を与えることなく、大量のデータをローカルに保存できます。

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

Webストレージはオリジンごと(ドメインおよびプロトコルごと)です。1つのオリジンからのすべてのページは、同じデータを保存してアクセスできます。

ブラウザのサポート

表の数字は、WebStorageを完全にサポートする最初のブラウザバージョンを示しています。

HTMLWebストレージオブジェクト

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

• window.localStorage-有効期限なしでデータを保存
• window.sessionStorage-1セッション分のデータを保存します(ブラウザのタブを閉じるとデータは失われます)

Webストレージを使用する前に、localStorageとsessionStorageに対するブラウザのサポートを確認してください。

localStorageオブジェクト

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

例の説明

• name="lastname"とvalue="Smith"でlocalStorageの名前と値のペアを作成します
• 「lastname」の値を取得し、id="result"の要素に挿入します

上記の例は、次のように書くこともできます。

"lastname" localStorage 項目を削除するための構文は次のとおりです。

注：名前と値のペアは、常に文字列として格納されます。必要に応じて、別の形式に変換することを忘れないでください。

次の例では、ユーザーがボタンをクリックした回数をカウントします。このコードでは、値の文字列が数値に変換され、カウンターを増やすことができます。

sessionStorageオブジェクト

次の例では、現在のセッションでユーザーがボタンをクリックした回数をカウントします。