By U Zensen.

欲しいものはプログラミングで自分で作る。

JavaScriptのWebStorageについて

2016 / 9 / 4 2016 / 9 / 18
JavaScript
160904_title

はじめに!!

お疲れ様です。ぴーすけです。

JavaScriptでのデータ保存方法としてCookieは有名だと思いますが、もう一つ「WebStorage」があります。

今回はそのWebStorageについてまとめたいと思います。

スポンサードリンク

WebStorageとは!!

WebStorageとは、HTML5から実装された機能です。これはCookieのようにブラウザに保存される領域で、JavaScriptから値の操作ができます。

cookieと違うところ!!

  • 通信のたびに、サーバーに値が送信されない(送信したい場合は、formなどから明示的に送信)
  • 保存容量が大きい
  • 無期限(Cookieは有効期限を決めて、そこで削除)

WebStorageには2つある!!

  • sessionStorage
  • localStorage

sessionStorageとは

ウィンドウやタブ単位で有効なストレージです。ウィンドウやタブを開いている間だけ保存される値で、閉じるとその値は削除されます。

localStorageとは

オリジン単位で永久的に保存されるストレージです。オリジンとは「https://byuzensen.com:80」のように「プロトコル://ドメイン:ポート」のことです。

同じオリジンであれば、別のウィンドウやタブでもデータを共有できますし、閉じてもデータは削除されません。

WebStorageで用意されているメソッド、属性!!

length
保存されているデータの数を返す
key(n)
保存されているn番目のkeyを返す
getItem(key)
keyに対応するvalueを取得する
setItem(key, value)
keyとvalueのペアでデータを保存する
removeItem(key)
keyに対応するvalueを削除する
clear()
データをすべてクリアする

データ保存の方法!!

sessionStorageとlocalStorageも使い方は同じです。プロパティからもアクセスできますが、ブラウザごとに挙動が異なるため、メソッド(getItem, setItem)を使うべきです。

//sessionStorage
//保存時
sessionStorage.setItem('key', 'value'); 

//取得時
sessionStorage.getItem('key');// -> value

//localStorage
//保存時
localStorage.setItem('key', 'value'); 

//取得時
localStorage.getItem('key');// -> value

保存した値は全て文字列として保存されます。なので、オブジェクトを保存する場合はJSON形式に変換して保存し、取得時にもJSON形式で受けとることで保存が可能になります。

var obj = {'hoge': 'fuga'};

//保存時
//オブジェクトをJSON形式にして保存
localStorage.setItem('hogeData', JSON.stringify(obj)); 

//取得時
//取得した文字列をJSON形式からオブジェクトに戻す -> {'hoge': 'fuga'}
JSON.parse(localStorage.getItem('hogeData'));

取扱注意!!

localStorageに格納されているデータは、取り出したりしていなくてもページを読み込んだ際に自動で読み込まれます。

読み込みは同期的なので、<script>を読み込むときのように、読み込み中は他のレンダリングがブロックされます。

なので、無駄に値を保存しないほうがいいです。常に大量のデータを保存しておくことはページの表示に影響します。

サンプル!!

sessionStorage

キー:
値 :

sessionStorageはウィンドウやタブごとに保存される値なので、データを保存したウィンドウとは違うウィンドウでアクセスした場合は、そのデータは共有されません。

さらに、データを保存したウィンドウやタブを削除すると次に来た時に値は削除されています。

localStorage

キー:
値 :

localStorageはオリジンごとにデータが保存されるので、データを保存したウィンドウと違うウィンドウでアクセスした際にもデータは共有されています。

さらに、ウィンドウが閉じられたとしてもそのデータは削除されません。

以上!!

以上です!どうだったでしょうか?

WebStorageやCookieはそれぞれ挙動が少しずつ違うので、それぞれに向いている使い方があると思います。

挙動や特性を理解して、新しい使い方を考えるのも楽しいかもしれませんね!

Pocket

コメント

コメントを残す