Cara Menggunakan Penyimpanan Lokal dengan Aman

Minggu lalu, saya terganggu oleh pesan peringatan kesalahan produksi saat saya fokus pada pengkodean. Saya harus berhenti bekerja dan mencari tahu apa yang terjadi.

Kesalahannya adalah

kita tidak dapat mengetahui kode mana yang tidak berfungsi dengan baik dari lokasi kode untuk produksi file javascript semuanya dikompilasi dan uglify.

Saat mencari masalah, kami dapat menemukan bahwa browser tidak mendukung penyimpanan lokal. Solusi termudah adalah menangkap kesalahan saat menggunakan localStorage:

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

Cara yang lebih baik adalah dengan menyediakan file util untuk mencapai:

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

Jika localStorage tidak didukung, kita dapat melakukan fallback untuk menggunakan memori. Cara terakhir akan menjadi seperti ini:

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

Dan kemudian uji kode ini di konsol Chrome, ini berfungsi dengan baik:

Semoga artikel ini dapat membantu Anda, dan nantikan untuk mengikuti saya untuk mempelajari lebih banyak keterampilan.

Lebih banyak konten di PlainEnglish.io . Mendaftar untuk buletin mingguan gratis kami . Ikuti kami di Twitter , LinkedIn , YouTube , dan Discord . Tertarik dengan Peretasan Pertumbuhan? Lihat Sirkuit .