Skip to content

localStorageを使ったライブラリ、ソフトウェアまとめ

by : 2014/10/17

HTML5で注目したいAPIの一つにWeb Storage(localStorage, sessionStorage)があります。いわばCookieのようにWebブラウザ内にデータを蓄積できる仕組みになりますが、Cookieとは違って外部のサーバに飛ばすことなく、ローカルでのみ使えるデータになります。

まだまだ利用実績としては多くありませんが、localStorageを扱うライブラリは増えてきています。そこで今回は先進的事例をもとに使い方をはじめ、実際どういった場面で活きてくるのかを紹介します。

hyuki0000/draft


draftはテキストエリア以外何も表示されないテキストエディタです。何もないのでフルスクリーンで表示すれば集中して物書きに励めるようになります。データはlocalStorageに自動的に保存されますので、間違って閉じてしまっても再現される仕組みです。

ライブデモ

hyuki0000/draft

Realms


RealmsはGitをストレージにしたWikiエンジンで、編集中データをlocalStorageに保存しています。Webサーバ上にドラフト保存するサービスもありますが、複数人で編集したりすると逆に混乱を招く可能性もありますので編集データは個々人のlocalStorageにという割り切りは良いと思います。

Realms

zendesk/cross-storage

CrossStorageは複数のドメインで一つのlocalStorageを共有する技術になります。一つサーバがハブとなってデータを受け取ることで、データが共有できる仕組みになっています。ただし1ドメイン5MBまでという制約はありますので、共有されるデータも全体で5MBまでになります。

zendesk/cross-storage

diy/intercom.js

Intercomは同じブラウザの他のタブ間でメッセージをやり取りするための仕組みになります。一つのウィンドウから他のウィンドウやタブに対して一斉にメッセージを送信できます。一つのウィンドウでだけ、WebSocketを使い、他はIntercomでメッセージを飛ばすと言った方法も考えられます。

diy/intercom.js

jcubic/sysend.js


sysend.jsも同じブラウザ内で他のウィンドウやタブに対して情報発信、受信ができるライブラリです。Webアプリケーション化が進む中でこういった仕組みが必要になるケースは出てくるかも知れません。

ライブデモ

jcubic/sysend.js

ZenPen


ZenPenは上述のdraftに近いですが、よりリッチなエディタとなっています。localStorageを使うことで保存ボタンを押す手間がなくなり、かつほぼリアルタイムでデータが保存できるようになっています。記述した内容はMarkdown、HTMLなどでダウンロード可能です。

ZenPen ~ Minimal Distraction, Maximim Zen

Garlic.js


Garlic.jsはフォームに入力中のデータを保存するライブラリです。テキストボックス、テキストエリア、ドロップダウン、ラジオボタン、チェックボックスの状態をlocalStorageに保存し、再現できるようになっています。

Garlic.js

localForage API Reference


localForageはlocalStorageをベースに、さらに便利な機能を付け加えたライブラリになります。基本文字列しか保存できないlocalStorageにオブジェクトの種別をもたせています。さらにPromiseでデータの保存、取り出しを使えるようになっています。localStorageの他、IndexedDBやWebSQLを使うこともできます。

localForage API Reference

Filldisk


Filldiskはライブラリという訳ではありません。FilldiskにアクセスするとディスクをいっぱいにするまでlocalStorageがたまっていきます。これは http://*.filldisk.com にどんどんアクセスしながら5MBいっぱいまでlocalStorageを保存するためです。サブドメインがどんどん作られてしまうと怖い仕組みかも知れません。

Fill up your hard disk with just a single click – using HTML5 localStorage!

basket.js


basket.jsはJavaScriptをlocalStorageに保存してキャッシュする仕組みになります。Mobify社の調査によると、スマートフォンブラウザの場合localStorageはキャッシュの5倍高速であったと言われています。となるとbasket.jsはキャッシュよりも高速な動作が期待できるでしょう。

basket.js – a simple script loader that caches scripts with localStorage

Sisyphus


Sisyphusはフォームの入力値を保存してくれるライブラリです。除外するコントロールやオートリリース設定、様々なコールバックがサポートされています。とは言え使い方としてはSisyphusのメソッドを呼び出すだけなのでとても簡単に使えるはずです。

Sisyphus – Gmail-like client-side drafts and bit more


いかがでしたか。localStorageの良い使い方が見つかったでしょうか。個人的にはフォームの入力値保存はおすすめです。誰しも間違ってブラウザを閉じてしまったり、クラッシュしてしまってフォームの入力が消し飛んでしまった経験があるはずです。そんな時、このライブラリを使うことで入力値が再現できます。

キャッシュの代わりに使うというのは先進的で、ちゃんと使うためにはテクニックが必要だと思います。しかしスマートフォンのブラウザであれば5倍高速であるとなれば、ユーザ体験の向上には欠かせない存在になりそうです。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

HTML5企業Webシステムのための開発プラットフォーム

From → まとめ, HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。