【Javascriptライブラリ】localStorageを簡単にする「memol.js」を作ってみました。

どうも、パンジェンシーでございます。

f:id:x-fieldatts:20150502134035p:plain

今回も、自分が作成したライブラリの紹介です。

HTML5を使えば、ブラウザ上にリッチなコンテンツを作成することができます。

その中でも、localStorageは、クライアントの端末内にデータを保存できる便利な機能です。

しかし、いざ使おうとすると、色んなアプリで作成したデータがグッチャグッチャになってワケワカメ状態になること必至です。

なので、アプリ毎にストレージを分けたり、色々やってくれるライブラリ「memol(メモル).js」を作成してみました。

コード

memol.js

// memol.js
/* example
	<script>
	var memo = memol("example");
	memo.set("myname", "xnoudon");
	console.log(memo.get("myname"));
	memo.delAll();
	console.log(memo.get("myname"));
	</script>
*/
var memol = function(storageId) {
    var STORAGE_ID = storageId;
    return {
        'STORAGE_ID': null,
        'get': function(key) {
　　　　　　// ユーザー情報をオブジェクト形式で取得
            if (window.localStorage && window.localStorage[STORAGE_ID]) {
                var datalist = JSON.parse(
                    window.localStorage.getItem(STORAGE_ID));
                if (datalist[key] !== null) {
                    return datalist[key];
                } else {
                    return null;
                }
            }
            return null;
        },
        'set': function(key, val) {
　　　　　　// ユーザー情報をローカルストレージに保存
            if (window.localStorage) {
                var datalist;
                if (window.localStorage[STORAGE_ID]) {
                    datalist = JSON.parse(window.localStorage.getItem(STORAGE_ID));
                } else {
                    datalist = {};
                }
                datalist[key] = val;
                window.localStorage.setItem(STORAGE_ID, JSON.stringify(datalist));
                return "set was successful";
            }
            return null;
        },
        'delAll': function() { // 保存したデータを全て削除
            if (window.localStorage) {
                window.localStorage.removeItem(STORAGE_ID);
            }
            return null;
        }
    };
};

テスト用のコードは以下です。

test.html

<!doctype html>
<html lang='ja'>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>memol test</title>
</head>

<body>
  <h2>memol</h2>
  <p>
    <h4>set</h4>
    <input id="input" type="text">
    <button id="set">set</button>
  </p>
  <p>
    <h4>get</h4>
    <button id="get">get</button>
    <textarea id="output"></textarea>
  </p>
  <p>
    <h4>delAll</h4>
    <button id="delAll">delAll</button>
  </p>
</body>
<script src="memol.js"></script>
<script>
//***********************************************
// memol(メモル).jsは、localStorageの読み書きを
// 簡単に行うためのライブラリです
//***********************************************

var memo = memol("example");
// まず、memolオブジェクトを作成します
// 引数として、ストレージの名前を入れます。

document.getElementById("set").addEventListener("click", function() {
  var input = document.getElementById("input").value;

  console.log(memo.set("memo", input));
  // set()は、ストレージにデータを書き込みます。
  // この例では、"example"ストレージに、
  // "memo"という名前で、内容がinputであるデータを書き込みます。

  document.getElementById("input").value = "";
});

document.getElementById("get").addEventListener("click", function() {
  var output = memo.get("memo");
  // get()は、ストレージに書き込んだデータを読み出します。
  // この例では、"example"ストレージに保存してある
  // "memo"という名前のデータの中身を取り出しています。

  document.getElementById("output").innerHTML = output;
});

document.getElementById("delAll").addEventListener("click", function() {
  memo.delAll();
  // dellAll()は、ストレージ内のデータを全て削除します。
  // この例では、"example"ストレージのデータを削除しています。
  // 別の名前で作成したストレージのデータは削除されません。
});
</script>

</html>

まとめ

太古の昔に作成したコードなので、何がどういいのか忘れてしまいましたが、多分、保存するデータが、何でもOKになるところがメリットだと思います。

例えば、連想配列を保存しようとすると、window.localStorage.setItem()では、一旦文字列に変換して保存する必要があり、取り出す際にも、パースする必要があります（多分）。

その辺をライブラリがちゃっちゃとやってくれる感じにしたんだと記憶しています。

誰かのお役に立てれば幸いです。

ではまた。

パンジェンシーの「汗だく開発日誌」

システム開発の備忘録です。

【Javascriptライブラリ】localStorageを簡単にする「memol.js」を作ってみました。

コード

まとめ