Mengapa kita membutuhkan penyimpanan lokal di javascript?

Menjadi pengembang web, kita semua pernah berada dalam situasi, di mana kita ingin mempertahankan sepotong informasi seperti data pengguna, preferensi tema, atau filter yang dipilih, untuk memberi pengguna pengalaman yang konsisten di seluruh sesi browser

Nah, di situlah LocalStorage API masuk ke dalam gambar

Tunggu, tunggu. Mari kita mulai dari dasar

Apa itu Penyimpanan Lokal?

API LocalStorage dari browser web memungkinkan untuk menyimpan dan kemudian membaca data yang disimpan di seluruh sesi browser

Mari kita hancurkan

• Ini memungkinkan kita untuk menyimpan data ke dalam memori persisten sehingga data tersebut tetap tersedia saat kita me-restart browser atau bahkan komputer
• Ini menyimpan data secara lokal ke asal itu, artinya Anda hanya dapat membaca/menulis data ke Penyimpanan Lokal untuk asal saat ini i. e kombinasi berikut (protokol+domain+port)

Perlu dicatat bahwa LocalStorage mulai kosong dan item yang ditambahkan selama sesi pribadi dihapus segera setelah tab pribadi terakhir ditutup

Internal Penyimpanan Lokal

LocalStorage adalah penyimpanan nilai kunci, artinya menyimpan nilai yang diberikan terhadap kunci yang disediakan, seperti objek JavaScript tetapi persisten

Penyimpanan Key-Value menyediakan pencarian dan penulisan cepat karena strukturnya menemukan elemen yang tepat akan selalu membutuhkan waktu yang konstan (terlepas dari waktu untuk melakukan I/O). Ini berarti memiliki ratusan kunci di LocalStorage Anda tidak akan memperlambat pencarian. (Tidak yakin mengapa Anda melakukan itu. )

Dengan kecepatannya muncul satu batasan, key dan value keduanya harus berupa string untuk disimpan di Penyimpanan Lokal
Yah, ini tidak terlalu sulit untuk berkeliling

Saat ini spesifikasi Penyimpanan Web memungkinkan Anda menyimpan hingga 5MB per aplikasi per browser

Bagaimana cara menggunakan Penyimpanan Lokal?

Untungnya LocalStorage API cukup sederhana untuk berinteraksi

Mari lanjutkan dan lihat bagaimana kita dapat melakukan operasi dasar seperti Buat/Baca/Perbarui/Hapus di Penyimpanan Lokal,

Menulis data

localStorage.setItem() menerima string sebagai key dan value juga diterima sebagai string

    localStorage.setItem('<key>', '<value>')

Masuk ke mode layar penuh Keluar dari mode layar penuh

Baris kode di atas akan menulis nilai terhadap kunci yang diberikan, jika sudah ada, nilai yang ada akan ditimpa

Membaca data

Untuk membaca informasi yang disimpan, kami perlu memberikan key

  const value = localStorage.getItem('<key>')
  // value will be null or string

Masuk ke mode layar penuh Keluar dari mode layar penuh

  const value = localStorage.getItem('<key>')
  // value will be null or string

Menyimpan Objek di Penyimpanan Lokal

Anda mungkin bertanya-tanya, "String. Astaga, apa yang akan saya lakukan tentang suatu objek?". Jangan khawatir

Kami masih diizinkan untuk menyimpan versi objek yang diserialisasi,

    // storing an object in LocalStorage
    const user = { name: 'anshuman_bhardwaj' }
    localStorage.setItem('user', JSON.stringify(user))

    // reading the object from LocalStorage
    const strinifiedUser = localStorage.getItem('user')
    if(strinifiedUser) {
      const retrivedUser = JSON.parse(strinifiedUser)
    }

Masuk ke mode layar penuh Keluar dari mode layar penuh

Menghapus data

Ada dua metode untuk menghapus data yang disimpan dari LocalStorage secara terprogram

  const value = localStorage.getItem('<key>')
  // value will be null or string

_4

Jika Anda sudah tahu item mana yang harus dihapus,

  const value = localStorage.getItem('<key>')
  // value will be null or string

    localStorage.removeItem('<key>')

Masuk ke mode layar penuh Keluar dari mode layar penuh

  const value = localStorage.getItem('<key>')
  // value will be null or string

_6

Jika Anda ingin menghapus semua kunci dari penyimpanan, maka

  const value = localStorage.getItem('<key>')
  // value will be null or string

    localStorage.clear()

Masuk ke mode layar penuh Keluar dari mode layar penuh

Meskipun kedengarannya menarik, metode

  const value = localStorage.getItem('<key>')
  // value will be null or string

Ini berarti jika Anda berinteraksi dengan layanan yang menggunakan LocalStorage e. g. modul autentikasi seperti Firebase Auth atau Okta, menghapus Penyimpanan Lokal juga akan menghapus data yang telah dimasukkan oleh layanan tersebut dan akan merusak perilakunya

Ya, jangan khawatir, aku punya kamu

Dalam ilmu komputer kita harus selalu fokus pada enkapsulasi, artinya kita harus menyembunyikan informasi atau merangkumnya. Nah, itulah tepatnya bagaimana kita akan menyelesaikan masalah kecil kita di sini

Pola berikut disarankan kepada saya oleh teman dan kolega saya Ryan

Membuat dan menggunakan Namespace di LocalStorage?

Kami dapat menerapkan prinsip enkapsulasi di sini dengan meletakkan semua data kami di bawah kunci atau ruang nama yang telah ditentukan & unik. Ini akan memungkinkan kita untuk menyembunyikan kita dari bagian lain dari aplikasi (yang tidak kita kendalikan) dan juga menyelamatkan kita dari kesalahan memperbarui data yang seharusnya tidak kita lakukan.

"Kedengarannya bagus, tapi bagaimana kita melakukannya?", Anda mungkin bertanya-tanya

Yah, itu lebih sederhana daripada kedengarannya dan bekerja dengan melampirkan seluruh status aplikasi di bawah satu kunci daripada menggunakan kunci baru untuk setiap informasi.

Langkah 1

Buat kunci, dapat diprediksi namun unik. Contoh yang bagus adalah [nama-aplikasi-Anda]+[beberapa-token-unik] i. e. DEV-007

Langkah 2

Sambil menyimpan informasi, kita membaca nilai namespace dari LocalStorage, deserialize, memperbarui nilai terhadap kunci di dalam objek dan kemudian membuat serial lagi sebelum menulis ke LocalStorage

Langkah 3

Saat membaca informasi, kami membaca nilai namespace dari LocalStorage, membatalkan serialisasi dan mengembalikan nilai kunci dari objek

Dengan cara ini kami memperlakukan namespace seperti LocalStorage kecilnya sendiri

Di bawah ini adalah implementasi kode di atas

const NAMESPACE = "DEV-007";

function writeToStorage(key, value) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  data[key] = value;
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

function readFromStorage(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = JSON.parse(serializedData);
  return data ? data[key] : undefined;
}

function clear() {
  localStorage.setItem(NAMESPACE, JSON.stringify({}));
}

function removeItem(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  delete data[key]
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Implementasi

  const value = localStorage.getItem('<key>')
  // value will be null or string

  const value = localStorage.getItem('<key>')
  // value will be null or string

Jangan khawatir Anda tidak perlu menulis implementasi Anda sendiri karena ada paket npm store2 yang memecahkan masalah di atas dan menyediakan penyimpanan lokal yang lebih cerdas

Mengapa kami menggunakan penyimpanan lokal di JavaScript?

Mengapa kita perlu menggunakan penyimpanan lokal?

Mengapa menggunakan penyimpanan lokal di react JS?

Apakah aman menggunakan penyimpanan lokal di JavaScript?