ブラウザのローカルストレージに情報を保存する

はじめに

デジタルサイネージでコンテンツを再生する際、他のコンテンツと交互に再生する場合があります。その場合、コンテンツは再読み込みされるため、ニュース情報やショップ情報などは、数十件とある記事から続きを再生する必要があります。
普段はCookieを使って再生位置を記憶させていますが、コンテンツをまたいで記事の続きを再生させたい場合には、localStorageを使って再生位置を保存して、コンテンツで流す記事を調整します。

目次

1. 環境
2. localStorage
3. localStorageの注意点
4. Store.js
5. Store.jsの使い方
6. 参考

1. 環境

Windows10 Pro
Chrome 80.0.3987.163 / 64bit

2. localStorage

local storageはHTML5の新機能であり、Webブラウザ（すなわちブラウザのユーザー）がJavaScriptを用いて任意の情報を保存できる仕組み
～HTML5のLocal Storageを使ってはいけない（翻訳）より引用～

だそうです。Cookieとの違いは以下

	保存容量	サーバの利用	保存期間	データ形式
Cookie	最大4KB	あり	任意に指定	文字列
localStorage	5MB（ブラウザにより可変）	なし	無期限	文字列

3. localStorageの注意点

localStorageは、どのJavaScriptからでも読み込みできるので、
個人情報やセッション情報など、重要な情報は保存してはいけません。
デジタルサイネージは固定のPCでの運用が想定され、筐体に埋め込まれてるので、
そこまで気にしなくても良いかもしれませんが、通常のサイトにおいて、
セッション情報など、一時的な情報をローカルを扱いたい場合は、sessionStorageを使うのが良いそうです。sessionStorageはブラウザタブが閉じるとデータも消えるようです。
今回はデータを残しておきたいので、localStorageを使用しています。

4. Store.js

localStorageでのデータのやりとりを扱いやすくしてくれる、
JavaScriptライブラリです。
store.jsからstore.legacy.min.jsをダウンロードして使います。

以下のブラウザに対応しているみたいです。

• IE6+
• iOS 8+
• Android 4+
• Firefox 4+
• Chrome 27+
• Safari 5+
• Opera 11+
• Node

store.js (Supported Browsers)より引用

また、localStorageは文字列のみの保存しかできないのですが、Store.jsを使うと、
JSONなどを文字列に変換する部分はStore.jsがやってくれるみたいで、
そのままJSONとして使う事ができます。

5. Store.jsの使い方

基本的な使用例

データを保存したり読み込んだりするためのkeyとなる名前を任意に付けます。
既にデータがあるかどうかをチェックして、なかったらデータを保存。
あったら、データを読み込み

howto.js

var key = 'hoge';
var obj = {};
var data = {mode:'news',count:0};
try{    //データがある
    obj = store.get(key);  //読み込み
}catch{ //データがない
    store.set(key,data);  //保存
    obj = data;
}
console.log(obj.mode, '/', obj.count);

削除と一覧

delete.js

//指定のkeyを削除
store.remove(key);

//localStorageまるごと削除
store.clearAll();

//localStorage内のデータ一覧
store.each(function(value, key) {
    console.log(key, '=>', value)
})

6. 参考

JSでブラウザにデータを保存する(store.js)
ブラウザのローカルストレージにデータを保存する「Store.js」
HTML5のLocal Storageを使ってはいけない（翻訳）