LocalStorage を安全に使用する方法

先週、コーディングに集中しているときに、プロダクション エラーの警告メッセージが表示されて中断されました。私は仕事をやめて、何が起こったのかを調べなければなりませんでした。

エラーは

本番用のコードの場所から、どのコードがうまく機能していないかを知ることはできません JavaScript ファイルはすべてコンパイルされ、醜いものになっています。

問題を検索すると、ブラウザーが localStorage をサポートしていないことがわかります。最も簡単な解決策は、localStorage の使用中にエラーをキャッチすることです。

try {
  const data = localStroage.getItem(key)
} catch(e) {
  // if localStorage not support, fallback
}

より良い方法は、実行するための util ファイルを提供することです。

export const storage = {
  getItem(key, fallbackValue) {
    try {
      return localStorage.getItem(key);
    } catch(e) {
      return fallbackValue;
    }
  },
  setItem(key, value) {
    try {
      localStorage.setItem(key, value);
    } catch(e) {
      // 
    }
  }
  removeItem(key, value) {
    try {
      localStorage.removeItem(key, value);
    } catch(e) {
      // 
    }
  }
}

localStorage がサポートされていない場合は、フォールバックしてメモリを使用できます。最終的な方法は次のようになります。

function isSupportLS() {
  try {
    localStorage.setItem('_ranger-test-key', 'hi')
    localStorage.getItem('_ranger-test-key')
    localStorage.removeItem('_ranger-test-key')
    return true
  } catch (e) {
    return false
  }
}

class Memory {
  constructor() {
    this.cache = {}
  }
  setItem(cacheKey, data) {
    this.cache[cacheKey] = data
  }
  getItem(cacheKey) {
    return this.cache[cacheKey]
  }
  removeItem(cacheKey) {
    this.cache[cacheKey] = undefined
  }
}
// if not support localStorage, fallback to memory
export const storage = isSupportLS() ? window.localStorage : new Memory();

次に、このコードを Chrome コンソールでテストします。うまく機能します。

この記事があなたのお役に立てば幸いです。さらにスキルを学ぶために私に従ってください。

その他のコンテンツはPlainEnglish.ioにあります。無料の週刊ニュースレターにサインアップしてください。Twitter、LinkedIn、YouTube、Discordでフォローしてください。グロースハッキングに興味がありますか？サーキットをチェックしてください。