公開日： 2018/10/20
最終更新日：2018/10/20

【JavaScript】ブラウザにデータを保存する場合はStrageオブジェクトを使おう

JavaScript
ブラウザにデータを持たせるための仕組みとして、CookieとWebStorageと言うものがある。

1 CookieとWebStorageの違い
2 2種類のWebStorage
3 WebStorageの使用方法
4 ストレージの確認方法
5 ストレージデータの削除方法
6 ストレージからすべてのデータを取り出す
7 ストレージにオブジェクトを格納する

CookieとWebStorageの違い

CookieとWebStorageには、それぞれ次のような違いがある。

■Cookie
データサイズの上限：小さい(4KB)
データの有効期限：あり
データ通信：リクエストの都度、サーバにも送信

■WebStrage
データサイズの上限：大きい(5MB)
データの有効期限：なし
データ通信：なし

上記からわかるようにWebStorageの方が使い勝手がいい。
そのため、基本的にはWebStorageを使用した方が良い。

2種類のWebStorage

WebStorageには以下の2種類が存在する。
・ローカルストレージ
オリジン単位でデータを管理。
ウィンドウ/タブをまたいでデータの共有が可能で、ブラウザを閉じてもデータは保持される。

・セッションストレージ
現在のセッションでだけ保持されるデータ。
ブラウザを閉じた時点でデータは破棄される。

以下の理由から、基本的にはセッションストレージを使い、必要な場合のみセッションストレージを使用するのが良い。
・明示的にデータを割くじしない限り、データが消えない。(ゴミが溜まりやすい)
・同一オリジンで複数のアプリを稼働している場合、変数名が衝突しやすい。

WebStorageの使用方法

//Storageへの格納と取り出しサンプル
var storage = localStorage;
storage.setItem('val1', '1');
storage.val2 = '2';
storage['val3'] = '3';
console.log(storage.getItem('val1'));  //1
console.log(storage.val2);  //2
console.log(storage['val3']);  //3

//Storageへの格納と取り出しサンプル

var storage = localStorage;

storage.setItem('val1', '1');

storage.val2 = '2';

storage['val3'] = '3';

console.log(storage.getItem('val1')); //1

console.log(storage.val2); //2

console.log(storage['val3']); //3

localStorageをsessionStorageに書き換えればセッションストレージに切り替えられる。

ストレージの確認方法

Chrome > 開発者ツール > Applicationタブから確認できる。

ストレージデータの削除方法

var storage = localStorage;
storage.removeItem('val1');
delete storage.val2;
delete storage['val3'];
storage.clear();    //全て消去

var storage = localStorage;

storage.removeItem('val1');

delete storage.val2;

delete storage['val3'];

storage.clear(); //全て消去

ストレージからすべてのデータを取り出す

var storage = localStorage;
storage.setItem('val1', '1');
storage.val2 = '2';
storage['val3'] = '3';

for (var i = 0, len = storage.length; i < len; i++) {
    var k = storage.key(i);
    var v = storage[k];
    console.log(`${k} = ${v}`);
}

var storage = localStorage;

storage.setItem('val1', '1');

storage.val2 = '2';

storage['val3'] = '3';

for (var i = 0, len = storage.length; i < len; i++) {

var k = storage.key(i);

var v = storage[k];

console.log(`${k} = ${v}`);

}

ストレージにオブジェクトを格納する

ストレージに保存したデータは全て文字列に変換されてしまう。
オブジェクトを格納したい場合は、オブジェクトに復元可能な文字列にする必要がある。
オブジェクトに復元可能な文字列を生成するためには、JSON.stringifyメソッドを使用する。

var storage = localStorage;
var member = {id : '0001', name : '田中太郎'};
storage.setItem('member', JSON.stringify(member));
var data = JSON.parse(storage.getItem('member'));

console.log(storage.getItem('member')); //そのまま出力：{"id":"0001","name":"田中太郎"}
console.log(data.id);   //JSON.parseで出力：0001