Smile Engineering blog ( スマイルエンジニアリング・ブログ )

ジェイエスピーからTipsや技術特集、プロジェクト物語を発信します

HTML5のお勉強 第4回 ~WebStorage~

2015-11-27 20:21:59 | 最新技術動向展開
ブラウザによるデータの保存について、旧来の仕組みにはCookieというものがありました。
しかしCookieは容量が4KBと少なく、
通信のたびに必ずサーバへ送られるためにセキュリティ上の課題もありました。
HTML5が普及し始めた現在では、「WebStorage」や「Indexed Database」
「FileSystem API」などがCookieを代替する技術として登場しました。

今回はその内の「WebStorage」についてご紹介します。


■WebStorageとは
WebStorageとは、ブラウザにデータを保存する仕組みになります。
JavaScriptからKey-Value方式でデータを保存することができます。

WebStorageには、「sessionStorage」と「localStorage」の2種類があります。

◆sessionStorage
ブラウザのタブやウィンドウ単位で保存される一時的なデータです。
開いていたタブやウィンドウを閉じると、データはすぐに削除されます。
また、複数のタブで同じURLのページを開いていても、ページ間のデータは共有されません。

◆localStorage
こちらはオリジン(※)単位でデータを永続的に保存します。
開いていたタブやウィンドウを閉じてもデータは削除されません。
同じオリジンであれば、複数のタブでデータを共有することができます。
※オリジン ... 「http://domain.com:80」のような、プロトコル、ドメイン、ポート番号の組み合わせ


■保存できるデータ形式と保存容量
保存できるデータはテキストや数値のみになります。
それ以外のデータを渡すと強制的に文字列に変換されます。
例えば、オブジェクトを渡すと "[object Object]" に変換されてしまいます。
必要に応じて JSON.stringify() などで変換すると良いですね。

保存容量はブラウザによって異なりますが
現在は「1オリジンにつき5MBまで」という仕様がW3Cから推奨されています。


■使い方
sessionStorage、localStorageともに使用方法は同じです。
localStorageを題材に使用方法をご紹介します。
見てもらえればわかりますが、とても簡単に使うことができます。


◆データの保存
localStorage.setItem("key", "value");

◆データの取得
localStorage.getItem("key");

// 存在しないキーを指定するとnullが返ります。
localStorage.getItem("unknown-key");

◆データの削除
localStorage.removeItem("key");

◆データの全削除
localStorage.clear();

◆データ数の取得
localStorage.length

◆キーの取得(「n番目のキー」という形で取得する)
localStorage.key(0);

// length以上の整数を指定するとnullが返ります。
localStorage.key(localStorage.length);


setItem, getItem, removeItemなどの関数があらかじめ用意されています。
それらを呼ぶだけで、簡単にデータの記録、取得、削除が行えます。

また、下記のような書き方でも操作できるようです。
しかし、誤動作を防ぐためにも使用しないほうが良さそうです。

localStorage.foo = "bar";
console.log(localStorage.foo);
delete localStorage.foo;


WebStorageを使うことで、簡易的なキャッシュを用意したり、
入力履歴を保存しておいたり、サイトへのアクセス回数をカウントしてみたり...
などなど、いろいろな用途に活用できそうですね。
使い方も簡単なので、Webエンジニアの皆様、ぜひ使ってみてください。

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント