フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)web strage

Webページに関する情報をクライアント側で保持しておきたいにはweb storageを使用します。特別新しい技術ではありませんが、一応基本的な使い方をメモとして残しておきます。

web storageには2種類あって、ウィンドウやタブが開いている間、一時的に保持しておくセッションストレージと、ウィンドウを閉じた後も永続的に保存しておくローカルストレージがあります。
ちなみに、web storageはアドレスに紐付いているので、ドメインやポート番号が違う場合は別サイトとして扱われるので機能しません。

web storageが利用可能かチェックする

web storageはグローバルオブジェクトとして用意されているので、if文でオブジェクトが存在しているか確認するだけでチェックが可能です。

// セッションストレージの場合
if(sessionStorage){
  ...
} 

// ローカルストレージの場合
if(localStorage){
  ...
}

 

保存されるデータは全てキーバリュー形式で保存されます。保存する場合はキーとバリューをセットで、取り出すときはキーを指定してデータの出し入れを行います。
※以下のサンプルは全てsessionStorageを使用していますが、localStorageも同じメソッドを使用してデータの保存を行います。

データの保存

データの保存はsetItemメソッドを使用します。

sessionStorage.setItem( key, value );
データの取り出し

保存したデータはgetItemメソッドを使用します。引数にキーを渡すとバリューが帰ってきます。

var val = sessionStorage.getItem( key );
キーの修得

保存されているキーはkeyメソッドで取得できます。引数にはインデックスを渡します。以下の例はsessionStorageに保存されている全てのキーとバリューを取得します。

for(var i=0; i<sessionStorage.length; i++){
	// キーを修得
	var keyText = sessionStorage.key(i);
	
	// バリューを修得
	var value = sessionStorage.getItem(keyText);
}
データの削除

特定のデータを削除する場合はremoveItemメソッドを使用します。引数にキーを渡すと、そのデータを削除してくれます。
全てのデータを削除する場合はclearメソッドを使用します。

// 特定のデータをキー指定で削除
sessionStorage.removeItem(key);

// 保存されている全てのデータを削除
sessionStorage.clear();