LocalStorage'ı Güvenle Kullanma

Geçen hafta kodlamaya odaklandığımda bir üretim hatası uyarı mesajı ile kesintiye uğradım. Neler olduğunu öğrenmek için çalışmayı bırakmak zorunda kaldım.

hata

üretim için kod konumundan hangi kodun iyi çalışmadığını bilemeyiz javascript dosyalarının tümü derlenir ve çirkinleşir.

Sorunu ararken, tarayıcının localStorage'ı desteklemediğini görebiliriz. En kolay çözüm, localStorage kullanırken hatayı yakalamaktır:

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

Daha iyi yol, gerçekleştirmek için bir kullanım dosyası sağlamak olacaktır:

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

localStorage desteklenmiyorsa, belleği kullanmak için geri dönüş yapabiliriz. Son yol şöyle olacak:

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

Ardından bu kodu Chrome konsolunda test edin, iyi çalışıyor:

Umarım bu makale size yardımcı olabilir ve daha fazla beceri öğrenmek için beni takip etmeyi dört gözle bekleyin.

PlainEnglish.io'da daha fazla içerik . Haftalık ücretsiz bültenimize kaydolun . Bizi Twitter , LinkedIn , YouTube ve Discord'da takip edin . Growth Hacking ile ilgileniyor musunuz? Devreyi kontrol edin .