Comment utiliser LocalStorage en toute sécurité

La semaine dernière, j'ai été interrompu par un message d'avertissement d'erreur de production alors que je me concentrais sur le codage. J'ai dû arrêter de travailler et découvrir ce qui s'était passé.

L'erreur est

nous ne pouvons pas savoir quel code ne fonctionne pas bien à partir de l'emplacement du code car les fichiers javascript de production sont tous compilés et laids.

Lors de la recherche du problème, nous pouvons découvrir que le navigateur ne prend pas en charge localStorage. La solution la plus simple consiste à détecter l'erreur lors de l'utilisation de localStorage :

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

La meilleure façon sera de fournir un fichier util pour accomplir :

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

Si le localStorage n'est pas pris en charge, nous pouvons nous rabattre sur l'utilisation de la mémoire. Le chemin final sera comme ceci:

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

Et puis testez ce code dans la console Chrome, ça marche bien :

J'espère que cet article pourra vous aider et j'ai hâte de me suivre pour acquérir plus de compétences.

Plus de contenu sur PlainEnglish.io . Inscrivez-vous à notre newsletter hebdomadaire gratuite . Suivez-nous sur Twitter , LinkedIn , YouTube et Discord . Intéressé par le Growth Hacking ? Découvrez Circuit .