localStorage を SQL っていうかクエリビルダぽく扱いたくてカッとなってやった

localStorage 自体 HTML5 の中でもストレスは少なめなきれいな API が用意されててると思うのだけれど、それでもめんどくさいっちゃめんどくさい。

文字列しか保存できない(正確に言えば例えば Array 突っ込むと toString 呼んでるのかな文字列返ってくる)ので、 Array だったり Object だったりを保存したい場合は JSON を使うのが普通ぽい。

var obj = {foo: 'bar'};

localStorage.setItem('key', JSON.stringify(obj));

var savedObj = JSON.parse(localStorage.setItem('key'));

console.log(savedObj);
// {foo: 'bar'}

使用頻度は高くないのだけれど、いろんなプロジェクトでちょろっと書くたびに毎回こんなん書いてるし、なにより取り出した後にやってることが絞りこみだったり並び替えだったり、 SQL 書かせろって気持ちになったのでカッとなって共通で使えそうなクエリビルダぽいライブラリ化をしてしまった(懺悔)

<a href="https://github.com/mojibakeo/lsql">mojibakeo/lsql</a>github.com

スクリプト読み込むとグローバル空間に lsql というオブジェクトつくるので、こいつを init() すれば使用を開始できます。以下ざっくり使用方法まとめ。

テーブル作る

lsql.create('users');

テーブル作ると同時に初期データつっこむ

lsql.createWithRows('users', [
  {id: 1, name: 'foo'},
  {id: 2, name: 'bar'},
  {id: 3, name: 'fuga'}
]);

データ挿入

lsql.insert('users', {id: 1, name: 'foo'});

データまとめて挿入

lsql.bulkInsert('users', [
  {id: 1, name: 'foo'},
  {id: 2, name: 'bar'},
  {id: 3, name: 'fuga'}
]);

条件一致する1件を取得

var user = lsql.query('users', {
  where: {id: 1}
});

条件一致するものを全部取得

var users = lsql.queryAll('users', {    
  where: {finish_tutorial: 1},
  sort: ['id', 'desc'], // 'asc' or 'desc'
  limit: 10
});

// or
var users = lsql.queryAll('users', {
  where: function(user) {
    return user.id > 10;
  },
  sort: ['id', 'desc'], // 'asc' or 'desc'
  limit: 10
});

データ更新

// bko => mojibakeo
lsql.update('users', {name: 'bko'}, {name: 'mojibakeo'});

// or 
var idntifier= function(user) {
  return user.name === 'bko';
};
var newValue = {name: 'mojibakeo'};
lsql.update('users', identifier, newvalue);

データ削除

lsql.deleteRows('users', {name: 'bko'});

// or 
lsql.deleteRows('users', function(user) {
    return user.name === 'bko';
});

テーブル削除

lsql.dropTable('users');

全テーブル削除

lsql.dropAll();

初期化チェック(テーブルあるかみてるだけ)

if (lsql.isNew()) {
  // do something
}

テーブル一覧

lsql.listTables();
// ['users', 'foo', 'bar']

こんな感じでさらっと読み書きできるようにした。

具体的な組み込み例として削除のないタスクリストアプリを用意したので興味があればこちらを。個人的な趣味で Vanilla な JS で書いてしまったの反省。jQuery 先輩使ったほうが余計なコード削れて見やすいなやっぱり。

反省しても書き直さないけどな。

余談 1

lsql の中に storage という localStorage を直接さわってるオブジェクトがいるので、保存したデータをまるごと取り出したいだけなときはこっちを叩いてもよいかもしれない。

余談 2

似た用途のものでは localStorageDB という活発にメンテされてるぽいものがあったのだけれど、スキーマレスでガツガツ気軽につっこんでいきたくて自分で書いた。スキーマ書いてデータ構造を守られたいときはこちらをつかうとよさげ。とても参考にさせてもらったので lsql とおなじ感覚で使える。 (っていうか localStorageDB に近い感覚で使えるのが lsql というのが正しい)

<a href="https://github.com/knadh/localStorageDB">knadh/localStorageDB</a>github.com

じゃあの

もじばけおなう

個人的なメモ