クライアントサイドストレージ

クライアントサイドストレージについてまとめます。

javascriptは基本的にクライアント側で動作させることが多く(一部例外はあります)、
ブラウザで実行する都度、データを生成したり、処理したり、サーバからデータを取得して出力する
といった動作がほとんどです。

また、ブラウザを再ロードすると、実行途中だったデータはjavascriptのプログラムと
ともにまた初期状態にもどった形になります。

その動作仕様で問題がないプログラムの場合はよいのですが、
処理途中のデータや、javascriptのプログラム動作中の状態を保持しておきたいシーンがでてきます。

その場合に使用する方法がクライアントサイドストレージと呼ばれる、
各マシンごとにデータを保持しておく仕組み(機能)があります。

また、クライアントサイドストレージで保持する機能には下記の種類があります。

・Web Storage
・クッキー
・Offline Web Applications(API)
・Webデータベース
・ファイルシステムAPI

このブログでは、上記のデータ保存方法を一つ一つ実際に動作するHTML＋javascritを用意して試していこうと思います。

HTML5で用意されているAPIです。
このAPIはlocalStorageとsessionStorageから構成されています。

構造としては、キーと値を組み合わせたものを保存するものです。

実装する際には、この機能にブラウザが対応しているかを確認する必要があります。

かなり歴史のある方法です。
クッキーに保存した情報はテキストデータで格納され、容量も大きくはありません。
また、クッキーはjavascriptだけではなく、サーバサイド言語からも取り扱うことができます。

Offline Web Applicationsは、HTML5で定義されているAPIです。
webぺージ、スクリプト、css、画像、をキャッシュすることができます。

またjavascriptのプログラム自身も保存できるので、オフライン環境で動作するwebアプリケーションとすることもできます。

この方法はある程度の大きなデータベースを必要とする場合に有効です。

各ブラウザにはIndexedDB APIというAPIが用意されており、
オブジェクト指向データベースとして動作します。

File and Directory Entries APIというAPIで、FileSystem上のファイルを読み書きする操作ができます。

javascriptからは任意のファイルシステムエントリのfilesystemプロパティからオブジェクトにアクセスができ、それらを作成、管理するAPIがあります。