2021-02-20

ローカル・ファイルでwindow.localStorageが動かないので、簡単なテスト用にどうにかするもの

window.localStorageが実装されているブラウザーでは、セキュリティー上の制限により、ローカル・ファイルでは参照するとUncaught DOM Exceptionを返す。普通のポリフィルのように、それらしきものを作ってやっても、Uncaught DOM Exceptionを返すのは変わらない。いったんdelete window.localStorageしてから、らしきものを作ってやるとうまくいく。

try {
  const test = "__test__";
  localStorage.setItem(test, test);
  localStorage.removeItem(test);
} catch (e) {
  delete window.localStorage;
  window.localStorage = {
    _data: {},

    clear() {
      return (this._data = {});
    },

    getItem(key) {
      return this._data[key];
    },

    removeItem(key) {
      return delete this._data[key];
    },

    setItem(key, value) {
      return (this._data[key] = String(value));
    }
  };
}

window.localStorageの存在確認にもいろいろあるので、このようなコードが必要になった。動かすだけは動かせるものの、保存されるわけではないので、完全には動作確認できないが、ダーク・モードの切り替え程度に使うだけなら十分だと思う。クッキーを代わりに使ったりなどするくらいなら、素直にローカル・サーバーを立てて確認するべきだろう。