localStorageに保存するデータを圧縮する

localStorageに保存できる容量は大体ドメインごとに5MBなのですが、今回保存する予定のデータの容量が大きく、圧縮しないとすぐに容量がいっぱいになりそうだったのでlz-stringを使って圧縮してみることにしました。

使い方はライブラリを組み込んでメソッドを呼び出せばいいだけなのですごく簡単なのです。ただ、いくつかあるメソッドのどれを使えばいいのか分からなかったので、以下はその時のメモと動作確認になります。

ライブラリはダウンロードして自サイトに配置するか、下記のようにCDNで呼び出してください。


<script src="//cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>

一部ブラウザで無効なUTF-16文字列が生成されるため、webkitブラウザでのみlocalStorageに保存できるようです。

0 byte

webkit以外のブラウザも格納できるUTF-16文字列を生成します。IE/Firefoxも対象とするならこちらを利用する感じでしょうか。

0 byte

localStorage保存用ではなくサーバ送信用。lz-string のバージョンが1.3.4以下ならこちら。厳密にはURIに準拠していないらしい。

0 byte

localStorage保存用ではなくサーバ送信用。lz-string のバージョンが1.3.5以上ならこちらを利用。

0 byte

Uint8Arrayで圧縮・解凍。localStorage保存用でもサーバ送信用でもないので用途不明。以下の動作確認での圧縮後のバイト数についてはuint8Array型のバイト数を表示しています。なお、圧縮の速度は通常のcompress()よりもこちらの方が試した限りでは速いです。

0 byte

localStorage保存のためのJavaScriptによる圧縮・解凍について色々と調べましたが、これといった記事が見つかりませんでした。探し方が悪いのか、そもそもlocalStorageにそんなでかいデータを保存しないのか...

今回使ったライブラリ「lz-string」があまり使われていないのかもしれませんが、他にそれっぽいのが見つからなかったんですよね。動作確認用に用意した圧縮・解凍の処理も正確なバイト数を算出しているのかちょっと怪しいです。なので、あくまで参考程度としてください。