読者です 読者をやめる 読者になる 読者になる

latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

WMCache.js を大容量の LocalStorage として使えるように機能を追加しました

cache.store で保存するときにドットから始まるパスを指定すると、隠しキャッシュ扱いになり、GC でキャッシュを自動削除しないようにしました。
つまり、WMCache.js を大容量の LocalStorage として利用可能になりました。

(ε・◇・)з o O ( どんぐらい大容量かというと…
(ε・◇・)з o O ( すごい大容量です!

以下は、LocalStorage と WMCache.js で大容量のバイナリファイルを扱う場合の比較です。

localStorage.setItem(), getItem() WMCache.store(), getXxx()
Sync/Async Sync (スレッドが2〜3秒ロックすることも) Async (ロックしません)
容量 最大5MB (実質3.75MB)
Base64換算で実質容量が目減りする
目安として 100MB〜2GB ぐらい
バイナリのまま保存して取り出せる
速度 遅い(Base64変換と逆変換が必要なため) 速い(Blob,ArrayBufferとして生データをそのまま扱えるため)
メモリ効率 悪い(Base64やDataURIへの変換が必要) 良い(内部はBlobやArrayBufferなので余計なメモリコピーが発生しない)

(ε・◇・)з o O ( createObjectURL はとても効率がよいのです
(ε・◇・)з o O ( 圧倒的ではないか我軍は

var cache = new WMCache(...);

// ストレージへの書き込み
var blob = new Blob(["HELLO"], { type: "text/plain" }); 
cache.store(".mydotfile.txt", blob, blob.type, blob.size, function() { ... }); 

// ストレージからの取り出し
cache.getText(".mydotfile.txt", function(url, data) {
    console.log(data); // "HELLO"
});

cache.getXxx シリーズは使い勝手が良くなるように色々と取り揃えてあります。

  • cache.get(path, function(url, data, ...) { ... }); // Blob または ArrayBuffer で取り出す(保存した時のデータ型のまま取り出す)
  • cache.getText(path, function(url, text, ...) { ... }); // String として取り出す
  • cache.getJSON(path, function(url, json, ...) { ... }); // Object として取り出す
  • cache.getBlob(path, function(url, blob, ...) { ... }); // Blob として取り出す
  • cache.getBlobURL(path, function(url, bloburl, ...) { ... }); // BlobURLString として取り出す(URL.createObjectURL(blob)する)
  • cache.getDataURL(path, function(url, dataurl, ...) { ... }); // DataURLString として取り出す
  • cache.getArrayBuffer(path, function(url, arraybuffer, ...) { ... }); // ArrayBuffer として取り出す