Blog

sessionStorageとlocalStorageについて

2015.08.18Cat:javascript デザイナー

html5が登場した時から存在しているので、今この件について触れるのは今更感があるのですが、扱い方を簡単にまとめてみました。

そもそもsessionStorageとlocalStorageってなに?っていうところ説明すると、
「javaScriptで扱うwebブラウザに保存できるデータ」になります。

今まで使われていたCookieと殆ど同じで、
webサイトのなにかしらの情報を保存しておくための機能になります。

Cookieとは何が違うのかというと、保存できる容量、そして永続的に保存できる(localStorage)という点です。sessionStorageはブラウザ、タブを閉じるまでです。

それでは扱い方の説明にいきます。
localStorageとsessionStorageの扱い方は同じなので、localStorageの場合のみ書きます。

 

保存

“key”と”value”で保存します。
“key”はidみたいなもので、”value”が保存したい中身です。

 

取得

“key”を指定して取得します。変数なんかに入れて扱うのが主だと思います。

 

削除

“key”を指定して削除します。

 

valueを配列で保存したい場合

keyに対して一つのvalueなので、一つしか保存出来ないのかというと、そういうわけではありません。
valueに配列を保存することでkeyに対して複数のデータを保存できます。

ただ、その場合、json形式して保存する必要があります。
 

 

まとめ

扱い自体は非常に簡単ですね!

ちなみに、保存されてるかどうかのチェックをご説明します。
Chromeの場合ですが、ブラウザ上で、右クリックで「要素の検証」を選択し、
「Resources」を選択した以下の箇所にあります。
スクリーンショット 2015-08-18 13.31.23

 

最後にまとめて書いておきます。

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ