Jak bezpiecznie korzystać z LocalStorage

W zeszłym tygodniu przerwał mi komunikat ostrzegawczy o błędzie produkcyjnym, kiedy skupiłem się na kodowaniu. Musiałem przerwać pracę i dowiedzieć się, co się stało.

Błąd jest

nie możemy wiedzieć, który kod nie działa dobrze z lokalizacji kodu dla produkcyjnych plików javascript, które są kompilowane i brzydkie.

Szukając problemu, możemy dowiedzieć się, że przeglądarka nie obsługuje localStorage. Najłatwiejszym rozwiązaniem jest wyłapanie błędu podczas korzystania z localStorage:

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

Lepszym sposobem będzie dostarczenie pliku util do wykonania:

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

Jeśli localStorage nie jest obsługiwane, możemy skorzystać z pamięci. Ostateczny sposób będzie taki:

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

A następnie przetestuj ten kod w konsoli Chrome, działa dobrze:

Mam nadzieję, że ten artykuł może ci pomóc i nie mogę się doczekać, aby śledzić mnie, aby nauczyć się więcej umiejętności.

Więcej treści na PlainEnglish.io . Zapisz się do naszego bezpłatnego cotygodniowego biuletynu . Śledź nas na Twitterze , LinkedIn , YouTube i Discordzie . Zainteresowany Growth Hackingiem? Sprawdź obwód .