So verwenden Sie LocalStorage sicher

Letzte Woche wurde ich von einer Produktionsfehler-Warnmeldung unterbrochen, als ich mich auf das Codieren konzentrierte. Ich musste aufhören zu arbeiten und herausfinden, was passiert ist.

Der Fehler ist

Wir können nicht wissen, welcher Code nicht gut funktioniert, aus dem Codespeicherort für Produktions-Javascript-Dateien, die alle kompiliert und hässlich sind.

Bei der Suche nach dem Problem können wir feststellen, dass der Browser localStorage nicht unterstützt. Die einfachste Lösung besteht darin, den Fehler bei der Verwendung von localStorage abzufangen:

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

Der bessere Weg wird sein, eine util-Datei bereitzustellen, um Folgendes zu erreichen:

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) {
      // 
    }
  }
}

Wenn localStorage nicht unterstützt wird, können wir auf Speicher zurückgreifen. Der letzte Weg wird so sein:

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();

Und dann testen Sie diesen Code in der Chrome-Konsole, er funktioniert gut:

Ich hoffe, dieser Artikel kann Ihnen helfen, und freuen Sie sich darauf, mir zu folgen, um weitere Fähigkeiten zu erlernen.

Weitere Inhalte auf PlainEnglish.io . Melden Sie sich für unseren kostenlosen wöchentlichen Newsletter an . Folgen Sie uns auf Twitter , LinkedIn , YouTube und Discord . Interessiert an Growth Hacking? Schauen Sie sich die Schaltung an .