WebStorageのエクスポート・インポート機能を実装する

 一般にLocalStorageやSessionStorageにはWebアプリケーションの作業データなどユーザが加工したデータが入っているため、ユーザがブラウザ管理領域以外の場所にバックアップをとっておきたいとか、違うブラウザにデータを移動させたいといったニーズがあるかと思う。そこで、WebStorageデータのエクスポート・インポート機能の実装例を示そう。

まず、インポートデータ、エクスポートデータのフォーマットを決める。下記の例はTeaOSで用いているフォーマットである。

提案するフォーマットは、行単位で、コマンドもしくは文章を指定するものである。行頭に@が付いていた場合はコマンド、ついていない場合は文章である。ただし、@@というように行頭の@マークが2つ連続している場合は、先頭文字が@である文章とみなされる。

まず、一般的なデータ例を示す。@bコマンドと@eコマンドで囲まれた領域が、WebStorageの要素の値であり、@bの行に定義された文字列が要素名である。

@b itemName1
itemValue1
@e
@b itemName2
itemValue2
@e

このデータ形式は、要素の中にエクスポートデータ形式が入っていた場合に、データ構造が壊れないよう必要な部分をエスケープする仕様になっている。下記はその例である。

@b itemName3
@@b itemName3
itemValue3
@@e
@e

メンバ関数は下記のように定義する。実装は簡単だが少々長いので割愛する。

Storage.prototype={
	import_:function(str){...},
	export_:function(){... return str;}
}
カテゴリー: html5_storage   タグ: , , , ,   この投稿のパーマリンク

コメントを残す