はじめに
Webアプリでは、クッキーを利用することで、クライアントに対して、小さなデータ（テキスト）を保存することができます。
しかし、JavaScriptでは、クッキーを操作しにいので、代わりにWebStorageを利用し、データを保存することがおすすめです。
ストレージは、データを特定するキーと値の組み合わせで保存されます。
ストレージにデータを保存する
storageData.js
// localStorageプロパティの戻り値を変数に格納
let storage = localStorage;
// 保存方法①
storage.setItem('lang1', 'JavaScript');
// 保存方法②
storage.lang2 = 'PHP';
// 保存方法③
storage['lang3'] = 'Ruby';
// 取得方法①
console.log(storage.getItem('lang1')); //JavaSciript
// 取得方法②
console.log(storage.lang2); //PHP
// 取得方法③
console.log(storage['lang3']); //Ruby
上記のようにデータの保存や取得は、複数あります。
ストレージの内容は、ブラウザの開発者ツールの[Application]タグの[Local Storage]から確認することができます。
データを削除する
storageData.js
//削除方法①
storage.removeItem('lang1');
//削除方法②
delete storage.lang2;
//削除方法③
delete storage['lang3'];
また、clearメソッドを使うことで、データを全て削除することができます。
storageData.js
//全てのデータを削除
storage.clear();
ストレージにオブジェクトを保存/取得する
ストレージに保存できるのは、基本的には文字列です。文字列の方法でオブジェクトを保存してしまうと、内部的に文字列化されてしまうので、のちにオブジェクトとして復元することができなくなってしまいます。
オブジェクトを復元できる形でストレージに保存したい場合は以下のように行います。
storageData.js
// localStorageプロパティの戻り値を変数に格納
let storage = localStorage;
//profileオブジェクト生成
let profile = {name: 'Tom', age: 23, height: 180};
//オブジェクトを復元可能な文字列に変換する。
storage.setItem('profile',JSON.stringify(profile));
// 文字列をJSON.parseメソッドに渡す
let data = JSON.parse(storage.getItem('profile'));
console.log(data.age) //23
JSON.stringifyメソッドを使い、保存することで、内部的に文字列にされたとしても、オブジェクトのような記法で書かれた文字列になるので、復元が可能になります。
データを取得する時は、JSON.parseメソッドに文字列を渡すことで、文字列からオブジェクトに復元します。
上記の仕組みをクラスとして準備すれば、オブジェクトの変換をあまり意識せずにオブジェクトを保存/取得することができるのではないでしょうか。