PR

48.HTML5 Webストレージ

スポンサーリンク

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.”;
記事が参考になった方、サイト運営を応援してくれる方へ

下のリンクから楽天トラベルでホテル予約か、楽天市場で商品購入を願いします。応援よろしくお願いします。
リンクを表示すれば楽天トラベルで予約の検索ができます。

リンクを表示すれば、お好きな商品が検索できます。

スポンサーリンク
haruki

ITエンジニア × 副業 × 投資家
副業と投資で年間100万円以上の収益を達成
ブログ・YouTube・投資で複数の収益源を確立

私は、IT業界でクラウドエンジニアとして10年以上の経験を積みながら、副業と投資を実践し、資産を増やしてきました。
このブログでは、 「最短で副業、本業の収益を上げ、資産を最大化する方法」 をリアルな成功事例と失敗談を交えて解説します。

Youneedjp.com の目的

「個人が副業と投資で安定収益を得るための実践ガイド」 を提供

副業・投資・お得なライフハックを 「すぐに実践できるノウハウ」 に特化し、
読者が 「月5万円の副収入」 を最短で得られるようにサポートします。

harukiをフォローする

クラウドファンディングで資金を集めています。運営を応援してくださる方は下のリンクの欲しいものリストからプレゼントお願いします。もちろん、住所、氏名などは匿名で発送できます。

参考になたっらSNSシェア&フォローもよろしくお願いします!質問、お仕事相談など、「X」のDMで気軽にご相談ください。

スポンサーリンク
スポンサーリンク
スポンサーリンク
HTML
スポンサーリンク
参考になった情報は、ぜひシェアお願いします
harukiをフォローする

コメント

タイトルとURLをコピーしました