Bagaimana cara mengakses penyimpanan lokal dalam javascript?

API yang disebut Penyimpanan Web menyediakan dua mekanisme dasar untuk menyimpan informasi di browser pengguna. sessionStorage dan localStorage

sessionStorage (yang tidak akan kita bahas dalam artikel ini), bekerja sangat mirip dengan localStorage, tetapi dengan satu perbedaan. itu menyimpan data yang disimpan hanya sampai akhir sesi pengguna, mis. e. hingga browser pengguna ditutup, termasuk memuat ulang atau memulihkan halaman

Penyimpanan lokal menyimpan data yang disimpan meskipun browser ditutup dan dibuka kembali. Ini membuatnya lebih mudah untuk membuat beberapa perilaku antarmuka selama penggunaan pengguna. Dan jelas, tentu saja, ini bukan untuk menyimpan data sensitif

Struktur penyimpanan datanya cukup sederhana, terdiri dari key-value pair. Sebuah contoh

{
  key: value
}

Untuk bekerja dengan data ini, pada dasarnya Anda dapat melakukan 4 tindakan, menggunakan 4 metode

• localStorage.setItem() untuk membuat key-value pair baru
• localStorage.getItem()_ untuk mengambil nilai kunci
• localStorage.removeItem()_ untuk menghapus pasangan tertentu
• localStorage.clear() menghapus SEMUA pasangan tersimpan untuk domain tersebut

Ada metode yang disebut key(). Tapi saya tidak akan membicarakannya di sini untuk menyederhanakan penjelasannya

Untuk melihat semua data yang disimpan di penyimpanan lokal browser Anda, cukup periksa halaman, klik tab Aplikasi, lalu, di sidebar, klik Penyimpanan Lokal (jalur menggunakan Chrome atau browser yang menggunakan mesin Chromium)

Metode ini memungkinkan Anda untuk menyimpan nilai di dalam penyimpanan lokal di browser pengguna

Buka konsol di browser Anda dan jalankan perintah berikut

localStorage.setItem("name", "Jack Sparrow");

Sekarang buka tab Application, pergi ke tempat localStorages disimpan dan klik “http. //medium. com". Anda akan melihat nama kami. "Jack Sparrow" disimpan

Catatan. Perhatikan bahwa nilainya akan selalu berupa string. Oleh karena itu, data yang akan disimpan di sana perlu diubah menjadi string sebelum disimpan. Untuk melakukannya, cukup gunakan metode JSON.stringify()_ sebelum meneruskan nilai ke setItem()

Sekarang setelah kami menyimpan nilai di browser pengguna, sekarang kami akan mengambilnya menggunakan metode

localStorage.setItem("name", "Jack Sparrow");

Bekerja seperti setItem() , kita akan menggunakan getItem() untuk mengambil nilai kunci yang disimpan sebelumnya. Dalam kasus kita, kita akan menggunakannya untuk mendapatkan kunci nama yang kita simpan di contoh setItem( ).

Jalankan perintah berikut di konsol Anda untuk melihat nilai yang tersimpan

localStorage.getItem("name");

Setelah kita tidak lagi menggunakan data ini, sebaiknya hapus dari localStorage untuk menghindari penumpukan data yang tidak perlu

Metode

localStorage.setItem("name", "Jack Sparrow");

Metode

localStorage.setItem("name", "Jack Sparrow");

localStorage.setItem("name", "Jack Sparrow");

Jalankan perintah berikut di konsol Anda untuk menghapus pasangan dan kemudian buka tab aplikasi untuk melihat apakah itu dihapus

localStorage.removeItem("name");

• Jangan gunakan localStorage untuk menyimpan data sensitif
• Data yang disimpan tidak memiliki lapisan perlindungan akses, artinya semua data yang disimpan di sana dapat diakses dengan kode apa pun di halaman Anda
• Di browser apa pun, penyimpanan lokal dibatasi hanya untuk menyimpan data sebesar 5Mb
• Penggunaan localStorage bersifat sinkron, mis. e. setiap eksekusi hanya dilakukan satu demi satu
• Anda hanya dapat menggunakan string di penyimpanan lokal, dan ini menyebalkan, karena membatasi penyimpanan data yang lebih kompleks
• Tidak dapat digunakan oleh pekerja web. Ini berarti bahwa jika Anda ingin melakukan aplikasi yang lebih kompleks, menggunakan pemrosesan latar belakang untuk meningkatkan kinerja, Anda tidak dapat menggunakan localStorage karena tidak tersedia

Jadi idealnya Anda harus menggunakan localStorage untuk situasi di mana Anda ingin menyimpan data yang bersifat publik, yang tidak sensitif, yang tidak akan digunakan di aplikasi yang lebih kompleks, yang tidak lebih besar dari 5 MB, dan itu adalah string.

Untuk hal-hal UI sederhana, di mana tidak masuk akal untuk menyimpan sesuatu di database atau di tempat yang lebih permanen, sebaiknya gunakan localStorage

Jika Anda membuat SPA atau situs/sistem apa pun dan menginginkan sedikit kebebasan dari server, penggunaan penyimpanan lokal sudah memadai dan menghabiskan banyak tenaga

Sekian untuk hari ini. Saya harap artikel ini membantu Anda dalam perjalanan pengembangan web Anda

Terima kasih sudah membaca. Ikuti saya di platform ini untuk membaca lebih banyak konten pengembang

Semoga harimu menyenangkan, sampai jumpa lagi. 👋

Bit adalah alat sumber terbuka untuk membuat aplikasi dengan cara modular dan kolaboratif. Jadikan komposisi untuk mengirim lebih cepat, lebih konsisten, dan mudah diskalakan

→ Pelajari lebih lanjut

Buat aplikasi, halaman, pengalaman pengguna, dan UI sebagai komponen mandiri. Gunakan mereka untuk menyusun aplikasi dan pengalaman baru dengan lebih cepat. Bawa kerangka kerja dan alat apa pun ke dalam alur kerja Anda. Bagikan, gunakan kembali, dan berkolaborasi untuk membangun bersama

Bagaimana cara mengatur penyimpanan lokal di JavaScript?

Bagaimana cara mengakses Penyimpanan browser lokal?