ローカルストレージを有効期限付きのキャッシュとして使えるJSライブラリ「lscache」

  Webブラウザに搭載されている ローカルストレージを 有効期限付きのキャッシュとして使える javascript ライブラリ「lscache」の紹介です。

 Webブラウザには  " ローカルストレージ " と呼ばれる ブラウザ本体に データを保存できる機能が用意されています。クライアント側にデータを保存する方法として " クッキー ( Cookie ) " が挙げられますが、ローカルストレージは クッキー の制限容量4KB と違い、 *最大5MBの容量が利用可能です。
( * ブラウザによって保存出来る容量は異なります * 例: chrome 10MB  )

 ローカルストレージ は Key Value Store (オブジェクト) 形式で データを管理するストレージです。またドメイン名ごとに管理されるので、同一ドメイン内であれば全ページに適応されます。

* ローカルストレージが利用可能なブラウザ
- IE 8 +
- Google Chrome 4 +
- firefox 3.5 +
- Safari 4.0 +
- Opera 11.5 +

 クッキーには有効期限を指定する機能が備わっていますが、4KBという制限のため サーバー側から受け取った 大きなデータを保存する用途には向いていません。それに対して、ローカルストレージには永続的に保存する目的なので指定時間でデータを破棄する機能は デフォルトで搭載されていません。

そんなローカルストレージで 有効期限の機能を実現できる javascript ライブラリが 「lscache」です。
 

- Webブラウザの ローカルストレージ内に 指定時間で削除される データを格納できる
  ( * redis の ' EXPIRE ' と 同等の機能をローカルストレージで実現できる と考えれば理解しやすいです )

lscacheは ' npm '、' bower ' をはじめ、パッケージマネージャーを通しても入手が可能です。

# npm
npm i lscache --save
# yarn
yarn add lscache
# bower
bower install lscache --save
# CDN
https://unpkg.com/lscache/lscache.min.js

 lscache はメソッド内にキー名や値、有効期限の時間 を入れるだけで簡単に使うことが出来ます。初期時にオブジェクトで細かな設定を渡す必要はありません。大きく概要を分けるなら データを登録・取得・削除、この 3種類です。

<!-- ライブラリの読み込み -->
<script src="/lscache/lscache.min.js"></script>

<!-- CDNから読み込み場合 -->
<script src="https://unpkg.com/lscache/lscache.min.js"></script>

1 : ローカルストレージにデータを登録

ローカルストレージにデータを登録する時は ' set ' メソッドを使います。第一引数には 登録するデータのキー名、第二引数には登録するデータの値、第三引数には保存する時間 ( 分 ) を指定します。

lscache.set( キー名, 値, 保存する時間 )

// TestKeyというキー名でデータを1分間登録
lscache.set('TestKey', 'なにかの値', 1); // 1分間保存されます
// オブジェクトもそのまま保存できます
lscache.set('TestObject', { myKey : "myVal" }, 2); // 2分間

登録するキーには ' setBucket ' メソッドを使って プリフィックス( 特定のキーワードのようなもの ) を付けることもできます。

lscache.setBucket(プリフィックス名)

// プリフィックス 'my-' を登録
lscache.setBucket('my-')
// 'testkey'というキー名で データを登録
lscache.set('testkey', 'some string', 1);

// 登録されたデータ : my-testkey : 'somestring'

2 : データの取得

登録したデータの取得には ' get ' メソッドを使って取得します。

lscache.get(キー名)

// データを登録
lscache.set(myKey, 'myVal', 1);
// myKeyを取得
lscache.get('myKey'); // myVal

3 : データの削除

 lscache にはデータを指定時間で削除する機能が備わっていますが、非同期通信であればデータは物理的に削除されません。ページを更新せずデータを削除する為に 3つのメソッドが用意されています。

lscache.remove(キー名) // 特定のキーのデータを削除
lscache.flush() // ローカルストレージ内のデータを全て削除
lscache.flushExpired() // 有効期限が切れているデータを削除

 エンドユーザーのブラウザがローカルストレージに対応してるか調べるための ' supported ' メソッドも用意されています

lscache.supported()

// supported メソッドは boolで値が返ってきます
if (!lscache.supported()) {
  alert('お使いのブラウザは ローカルストレージに対応していません');
  return;
} 

実際に ajaxで取得したデータを キャッシュとして使う時は下記のようになると思われます。

import lscache from "lscache";
import axios from "axios";

// ローカルストレージのキー名
const key = "keyName";

let res;

// ローカルストレージの'keyName'が存在するかチェック
if (!lscache.get(key)) {
  /* ローカルストレージにデータが無い時の処理 */

  // サーバーからデータを取得
  axios.get("/ajax-api")
    .then(val => {
      // ajaxで取得したデータをローカルストレージ内に登録
      lscache.set(key, val, 15); // 15分間のキャッシュ

      res = val;
    });
} else {
  // ajaxではなくローカルストレージからデータを取得
  res = lscache.get(key);
}

 以上が lscache の紹介でした。ユニークユーザー有りきのWebサービスの ' 運営からのお知らせ ' や、API回数制限 有り気の外部サービスと連携、リアルタイム性があまり必要ではない場所でのサーバーへのリクエストを負担したい時に補助として使うと サーバーへの負荷が減らせそうです。

GitHub : pamelafox/lscache