第3章 応用・JavaScript関連技術

Web Storageでローカルに情報を記録する

Web Storageの概要

Web Storageはクライアント側にデータをローカル環境に記録するための仕組みです。この仕組を利用することで、ユーザごとにパーソナライズして提供するようなサービスや、セッションを管理することなどが可能になります。同じような仕組みとしてCookieが古くから使われていますが、Web Storageはそれよりも高機能で扱いやすくなっています。ほとんどのモダンブラウザがWeb Storageに対応しており、InternetExplorerもバージョン8以上から対応しています。

比較内容 Cookie Web Storage
保存容量 4キロバイト 5メガバイト
有効期限 あり なし
通信 HTTPリクエスト時に自動で送受信 発生しない

Web StorageにはsessionStorageとlocalStorageの2種類のストレージが用意されています。どちらのストレージも同じメソッド、プロパティが用意されていて使い方も同じですが、データの有効範囲に違いがあります。sessionStorageの有効範囲はウインドウで、ウインドウが開いている間のみデータが保存されます。別ウインドウ間でデータを共有することもできません。localStorageはオリジン単位でデータを保存します。オリジンとは「プロトコル://ドメイン:ポート番号」の組み合わせで、同じオリジンであれば複数のウインドウ間でデータを共有することもできます。また、ブラウザを終了してもデータは削除されません。ウインドウを開いている間だけデータを保存しておきたい場合はsessionStorage、閉じた後も保存しておきたいときはlocalStorageという使い分けになるでしょう。

API

sessionStorageとlocalStorageには同じメソッド、プロパティが用意されています。

メソッド
メソッド名 説明
setItem( キー, 値 ) キーと値のペアで記録します。
getItem( キー ) 指定したキーとペアの値を取得します。
key( インデックス ) インデックスで指定した値を取得します。
removeItem( キー ) キーで指定したキーと値のペアを削除します。
clear() キーと値のペア全てを削除します。
プロパティ
メソッド名 説明
length Web Storageに保存されているデータの数

Web Storageに対応していないブラウザを考慮する場合、sessionStorageやlocalStorageが実装されているか確認する方法があります。下記コードでは、typeofを使ってオブジェクトの型を参照し、Web Storageが実装されているかを確認しています。

if ( typeof sessionStorage !== 'undefined' ) {
	// Web Storageを使う処理を記述
}

Web Storageの書き込みと読み込み

次のコードはWeb StorageのsetItem()メソッドでデータを記録し、そのデータをgetItem()メソッドで取得しています。ストレージはsessionStorageを使っていますが、sessionStorageとlocalStorageの使い方は全く同じなので、sessionStorageをlocalStorageに書き換えても正常に動作します。

CodePen: https://codepen.io/zionboogie/pen/LdLdZb
JavaScript
// WebStrageに記録
sessionStorage.setItem( "キー", "値" );

// WebStrageからキーを指定して取得
var val = sessionStorage.getItem( "キー" );

// コンソールに出力
console.log( val );

setItem()の第1引数にはキー、第2引数には値を指定します。記録した値を引き出したいときは、getItem()の引数に取得したい値のキーを指定します。

Web StorageにはないCookieの利点

CookieとWeb Storageを比較した場合、ほとんどの面でWeb Storageに軍配があがりますが、サーバ側プログラムとの連携が必要な際はCookieのほうが使い勝手が良いケースがあります。CookieはHTTPリクエスト時に自動的にCookie情報を送受信するので、サーバ側プログラムはいつでもCookie情報を取得できます。それに対し、Web StorageはHTTPリクエスト時に自動的に送信されないため、サーバ側プログラムはWeb Storageを直接取得する手段がありません。Web Storageに記録した情報をサーバ側で受け取るには、POSTやGETを使ってデータを送信する必要があります。
Web Storageの方式のほうが通信量やセキュリティ的にも良い仕組みですが、単純にサーバ側プログラムとJavaScriptの連携を考えると、Cookieの方が扱いやすいといえるでしょう。

配列やオブジェクトを記録する

Web Storageはキーと値のペアを文字列で記録するため、複数の値を1つのキーに記録したい場合はJSON形式などに変換します。JSON形式への変換はJSONオブジェクトのstringify()メソッドを使い、JOSN形式の文字列をオブジェクトに戻すにはparse()メソッドを使います。

// Web Storageに記録したい情報
var obj = {
	"k1" : 1,
	"k2" : 2,
};

// オブジェクトをJSON形式に変換
var json_text = JSON.stringify( obj );
// Web Strageに記録
localStorage.setItem( "キー", json_text );

// Web Strageからキーを指定して取得
var json_text2 = localStorage.getItem( "キー" );

// コンソールに出力
console.log( json_text2 );

// オブジェクト形式に変換
var obj2 = JSON.parse( json_text2 );

// コンソールに出力
console.log( obj2 );

記録したデータ全てにアクセスする

Web Storageに記録したキーと値のペア全てにアクセスしたい場合、for文とWeb Storageのlengthプロパティを使います。ストレージに記録されたキーはインデックスを使って取得することができます。次のコードでは、key()メソッドにインデックスを指定してキーを取得し、getItem()メソッドにそのキーを渡しています。

CodePen: https://codepen.io/zionboogie/pen/EEwxeV
JavaScript
// lengthプロパティを使ってlocalStorageに記録した全ての値にアクセス
for( var i =0; i < localStorage.length; i++ ){
	// インデックスを指定してキーを取得
	var key = localStorage.key( i );
	// キーを指定して値を取得し、コンソールに出力
	console.log( localStorage.getItem( key ) );
}

ChromeのデベロッパーツールでlocalStorageのデータを表示する

localStorageに記録したデータはChromeのデベロッパーツールから確認することができます。デベロッパーツールを開いた後、[Application]タブを開き、左カラムのStorageから該当のオリジンを選択します。選択したオリジンに記録されているデータは右カラムにキーと値のペアで表示されます。

記録されたデータは削除したり、フィルタを使って必要な情報だけ表示することができます。

関連記事