• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

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.”;

コメントを残す