【JavaScriptの応用】Web Storage

以前までは、ブラウザ上にデータを保存するにはCookieを使う方法が主流でした。
しかし現在では、Cookieよりも多くのデータ量を扱うことのできるWeb Storageが使われるようになってきました。

そこで今回は、Web Storageの使い方やCookieとの違いについて解説していきます。

Web Storage

Web Storageとは、サーバーからブラウザにデータを保管するための機能で、良く似た仕組みにCookieが挙げられます。

Cookieは、通信を行う度にデータがサーバーに送信されるため、送信毎のデータ量が増えてしまう点や、保存できるのが最大4KB程と、扱えるデータ量が少ないなどのデメリットがありました。
Web Storageの場合は、必要なデータを必要な時にのみ送信し、データ量も5MB以上の大きなデータを扱えるなど、Cookieの欠点を補う特徴があります。

Local StorageとSession Storage

Web Storageには、Local StorageとSession Storageの2種類あります。
基本的な使い方は同じですが、保存するデータの有効期限が異なります。

Local Storageは、クライアント側で削除しない限り永続的にデータが残り続けるのに対し、Session Storageは、一回のセッションのみ有効となるため、ブラウザやタブを閉じるとデータが破棄されます。
そのため、Session Storageでは、別タブ上でもデータが共有されることはありません。

ブラウザを開いている時だけデータを保存したい場合にSession Storage、ブラウザを閉じたあとも永続的にデータを保存したい場合にLocal Storageを選択すると良いでしょう。

Web Storageの使い方

Web Storageの特徴を掴んだところで、実際に利用してみましょう。
Local StorageとSession Storageには、共通のメソッドとプロパティが存在します。

データの保存

データを保存するには、setItem()を使います。

localStorage.setItem('key', 'value');

データの取得

データを取得するには、getItem()を使います。

localStorage.getItem('key');

データの削除

特定のデータを削除するには、removeItem()を使います。
また、clear()を使うとすべてのデータを削除することができます。

localStorage.removeItem('key');
localStorage.clear();

オブジェクトデータを保存する

上記のメソッドやプロパティを使って、Local StorageとSession Storageにデータの読み書きをすることができます。
現実的には1つずつキーや値を指定するのは手間がかかるため、オブジェクトや配列を使用してデータの読み書きができると便利です。

Web Storageは、キーと値のペアを文字列で表現する為、複数の値をまとめて記録したい場合には、JSON形式などに変換します。

// オブジェクト形式の元データ
let myData = {
  id: 1,
  name: 'Tarou Takana',
  city: 'Tokyo'
};

// オブジェクトからJSONに変換
let jsonData = JSON.stringify(myData);
// データを保存
localStorage.setItem('data', jsonData);

// JSONからオブジェクトに変換
let objData = JSON.parse(jsonData);
// データを取得
localStorage.getItem(objData);
console.log(objData);
/*
{
  id: 1,
  name: 'Tarou Takana',
  city: 'Tokyo'
}
*/

// 取得したデータを削除
localStorage.removeItem('objData');
// データを再取得
let getData = localStorage.getItem('objData');
console.log(getData); // null

オブジェクトからJSON形式への変換はstringify()を使い、JSON形式からオブジェクトへの変換はparse()を使います。
これらのメソッドは、データ変換の際に良く利用されているため、覚えておくと良いでしょう。

Local Storageの有効期限

Local Storageには有効期限という概念がありません。
そのため、Local Storageに保存するデータに有効期限を設けたい場合には、データ上にその情報を含める必要があります。

例えば、7日後の0:00を有効期限をする場合、以下のように表現することができます。

// 有効期限の計算
const now = new Date();
const in_seven_days = new Date(now.getFullYear(),now.getMonth(),now.getDate()+7);
const diff = in_seven_days.getTime() - now.getTime();

// 有効期限を記録
sessionStorage.setItem('expiry', diff);
// 有効期限を取得
let getData = sessionStorage.getItem('expiry');

if (getData !== null) {
  if (getData >= 0) {
    // 有効な場合は、残り日数/時間を出力
    const days = Math.floor(getData / 1000 / 60 / 60 / 24);
    const hours = Math.floor(getData / 1000 / 60 / 60) % 24;
    console.log(`有効期限は7日間です。残り${days}日と${hours}時間有効です`);
  } else {
    // 期限切れの場合、データを削除
    localStorage.removeItem(getData);
    console.log('期限切れです');
  }
}

実行結果

// "有効期限は7日間です。残り6日と7時間有効です"

まとめ

今回は、Web Storageによるデータの読み書き方法を解説しました。

サーバー側のプログラムとかんたんなデータ通信を行いたい場合は、Cookieの方が手軽に感じることがありますが、Web Storageを利用することによって、通信量やセキュリティの観点からメリットを感じることができます。
Web Storageを扱えるようになると、JavaScriptを使用したデータ通信の仕組みの理解が深まるため、ぜひ触ってみてください。