Come utilizzare LocalStorage in modo sicuro

La scorsa settimana, sono stato interrotto da un messaggio di avviso di errore di produzione quando mi sono concentrato sulla codifica. Ho dovuto smettere di lavorare e scoprire cosa è successo.

L'errore è

non possiamo sapere quale codice non funziona bene dalla posizione del codice per i file javascript di produzione sono tutti compilati e brutti.

Durante la ricerca del problema, possiamo scoprire che il browser non supporta localStorage. La soluzione più semplice è rilevare l'errore durante l'utilizzo di localStorage:

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

Il modo migliore sarà fornire un file util per eseguire:

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

Se localStorage non è supportato, possiamo ricorrere all'utilizzo della memoria. Il modo finale sarà così:

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

E poi prova questo codice nella console di Chrome, funziona bene:

Spero che questo articolo possa aiutarti e non vedo l'ora di seguirmi per imparare più abilità.

Altri contenuti su PlainEnglish.io . Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter , LinkedIn , YouTube e Discord . Interessato al Growth Hacking? Scopri Circuito .