Como usar o LocalStorage com segurança

Na semana passada, fui interrompido por uma mensagem de aviso de erro de produção quando me concentrei na codificação. Eu tive que parar de trabalhar e descobrir o que aconteceu.

o erro é

não podemos saber qual código não está funcionando bem a partir do local do código para produção de arquivos javascript são todos compilados e feios.

Ao pesquisar o problema, podemos descobrir que o navegador não suporta localStorage. A solução mais fácil é detectar o erro ao usar localStorage:

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

A melhor maneira será fornecer um arquivo util para realizar:

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 o localStorage não for compatível, podemos fazer fallback para usar a memória. A forma final será assim:

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 então teste este código no console do Chrome, funciona bem:

Espero que este artigo possa ajudá-lo e estou ansioso para me seguir para aprender mais habilidades.

Mais conteúdo em PlainEnglish.io . Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter , LinkedIn , YouTube e Discord . Interessado em Growth Hacking? Conheça o Circuito .