Cómo usar LocalStorage de forma segura

La semana pasada, me interrumpió un mensaje de advertencia de error de producción cuando me enfocaba en la codificación. Tuve que dejar de trabajar y averiguar qué pasó.

el error es

no podemos saber qué código no funciona bien desde la ubicación del código para que los archivos javascript de producción estén compilados y uglificados.

Al buscar el problema, podemos encontrar que el navegador no es compatible con localStorage. La solución más fácil es detectar el error al usar localStorage:

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

La mejor manera será proporcionar un archivo util para lograr:

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 localStorage no es compatible, podemos recurrir al uso de la memoria. La forma final será así:

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

Y luego prueba este código en la consola de Chrome, funciona bien:

Espero que este artículo pueda ayudarlo y espero seguirme para aprender más habilidades.

Más contenido en PlainEnglish.io . Regístrese para recibir nuestro boletín semanal gratuito . Síganos en Twitter , LinkedIn , YouTube y Discord . ¿Interesado en el Growth Hacking? Visita Circuito .