b00k.jp ~積み上げ式読書ノート~
公開日:
最終更新日:2018/10/20

【JavaScript】ブラウザにデータを保存する場合はStrageオブジェクトを使おう

JavaScript
ブラウザにデータを持たせるための仕組みとして、CookieとWebStorageと言うものがある。

CookieとWebStorageの違い

CookieとWebStorageには、それぞれ次のような違いがある。

■Cookie
データサイズの上限:小さい(4KB)
データの有効期限:あり
データ通信:リクエストの都度、サーバにも送信

■WebStrage
データサイズの上限:大きい(5MB)
データの有効期限:なし
データ通信:なし

上記からわかるようにWebStorageの方が使い勝手がいい。
そのため、基本的にはWebStorageを使用した方が良い。

2種類のWebStorage

WebStorageには以下の2種類が存在する。
・ローカルストレージ
オリジン単位でデータを管理。
ウィンドウ/タブをまたいでデータの共有が可能で、ブラウザを閉じてもデータは保持される。

・セッションストレージ
現在のセッションでだけ保持されるデータ。
ブラウザを閉じた時点でデータは破棄される。

以下の理由から、基本的にはセッションストレージを使い、必要な場合のみセッションストレージを使用するのが良い。
・明示的にデータを割くじしない限り、データが消えない。(ゴミが溜まりやすい)
・同一オリジンで複数のアプリを稼働している場合、変数名が衝突しやすい。

WebStorageの使用方法

localStorageをsessionStorageに書き換えればセッションストレージに切り替えられる。

ストレージの確認方法

Chrome > 開発者ツール > Applicationタブから確認できる。
8.ストレージの確認方法

ストレージデータの削除方法

ストレージからすべてのデータを取り出す

ストレージにオブジェクトを格納する

ストレージに保存したデータは全て文字列に変換されてしまう。
オブジェクトを格納したい場合は、オブジェクトに復元可能な文字列にする必要がある。
オブジェクトに復元可能な文字列を生成するためには、JSON.stringifyメソッドを使用する。

カテゴリー: IT, プログラミング
タグ   :

努力が続かないとお悩みの方へ!

努力のコツ PC用バナー

Amazonにて発売中!!

試験に受かる、給料を上げる、ビジネスを立ち上げる…。
自分の人生をよりよくしていくには、何よりも努力が欠かせません。
しかし、そうはわかっていてもなかなか続かないもの。。。
「めんどくさい」、「明日からでいいや」、「どうせやっても無駄だし」…
こんな風に私たちは努力を続けられずにいます。

ですが、それはあなたが怠けものだからとか、根性がないからというわけではありません。
どうすれば努力が続くのか、その「テクニック」を知らないだけなのです!
本書では、そんな「どうすれば努力が続くのか」というテクニックや心構えを集めました。
「達成したい夢があるのに、どうしても頑張れない…」
そんなあなたに是非とも読んでほしい1冊となっています。


広告

オススメ記事


PAGE TOP ↑