Mekanisme localStorage menyediakan jenis objek penyimpanan web yang memungkinkan Anda menyimpan dan mengambil data di browser. Anda dapat menyimpan dan mengakses data tanpa kedaluwarsa; data akan tersedia bahkan setelah pengunjung menutup situs Anda.
Anda biasanya akan mengakses localStorage menggunakan JavaScript. Dengan sedikit kode, Anda dapat membuat proyek sampel, seperti penghitung skor. Ini akan menunjukkan bagaimana Anda dapat menyimpan dan mengakses data persisten hanya menggunakan kode sisi klien.
Apa itu Penyimpanan lokal dalam JavaScript?
Objek localStorage adalah bagian dari API penyimpanan web yang didukung oleh sebagian besar browser web. Anda dapat menyimpan data sebagai pasangan nilai kunci menggunakan penyimpanan lokal. Kunci dan nilai unik harus dalam format UTF-16 DOM String.
Jika Anda ingin menyimpan objek atau array, Anda harus mengonversinya menjadi string menggunakan JSON.stringify() metode. Anda dapat menyimpan hingga 5MB data di localStorage. Juga, semua jendela dengan asal yang sama dapat berbagi data penyimpanan lokal situs tersebut.
Peramban tidak akan menghapus data ini bahkan ketika pengguna menutupnya. Ini akan tersedia untuk situs web yang membuatnya selama sesi mendatang. Namun, Anda tidak boleh menggunakan localStorage untuk data sensitif karena skrip lain yang berjalan pada halaman yang sama dapat mengaksesnya.
penyimpanan lokal vs. penyimpanan sesi
Itu penyimpanan lokal dan penyimpanan sesi objek adalah bagian dari Web Storage API yang menyimpan pasangan nilai kunci secara lokal. Semua browser modern mendukung keduanya. Dengan localStorage, data tidak kedaluwarsa bahkan setelah pengguna menutup browser mereka. Ini berbeda dari sessionStorage yang menghapus data saat sesi halaman berakhir. Sesi halaman berakhir saat Anda menutup tab atau jendela.
Kode yang digunakan dalam proyek ini tersedia di a Repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung dari proyek penghitung skor, Anda dapat melihat langsung demo.
Bagaimana Cara Kerja Penyimpanan lokal?
Anda dapat mengakses fungsionalitas penyimpanan lokal melalui Window.localStorage Properti. Properti ini menyediakan beberapa metode seperti setItem(), getItem(), dan removeItem(). Anda dapat menggunakan ini untuk menyimpan, membaca, dan menghapus pasangan kunci/nilai.
Cara Menyimpan Data di Penyimpanan lokal
Anda dapat menyimpan data di localStorage menggunakan setItem() metode. Metode ini menerima dua argumen, kunci, dan nilai yang sesuai.
window.localStorage.setItem('Python', 'Guido van Rossum');Di Sini, Python adalah kuncinya dan Guido van Rossum adalah nilai. Jika Anda ingin menyimpan array atau objek, Anda harus mengubahnya menjadi string. Anda dapat mengonversi array atau objek menjadi string menggunakan JSON.stringify() metode.
jendela.localStorage.setItem('Python', 'Guido van Rossum');konstan mahasiswa = {
nama: "Yuvraj",
tanda: 85,
subjek: "Pembelajaran Mesin"
}
konstan skor = [76, 77, 34, 67, 88];
jendela.localStorage.setItem('hasil', JSON.stringify (siswa));
jendela.localStorage.setItem('tanda', JSON.stringify (skor));
Cara Membaca Data Dari Penyimpanan lokal
Anda dapat membaca data dari localStorage menggunakan dapatkanItem() metode. Metode ini menerima kunci sebagai parameter dan mengembalikan nilai sebagai string.
membiarkan data1 = jendela.localStorage.getItem('Python');
membiarkan data2 = jendela.localStorage.getItem('hasil');
menghibur.log (data1);
menghibur.log (data2);
Ini menghasilkan output berikut:
Guido van Rossum
{"nama":"Yuvraj","tanda":85,"subjek":"Pembelajaran mesin"}Jika Anda ingin mengonversi hasil dari string menjadi objek, Anda harus menggunakan JSON.parse() metode.
membiarkan data2 = JSON.parse(jendela.localStorage.getItem('hasil'));
menghibur.log (data2);Cara Menghapus Sesi Penyimpanan lokal
Anda dapat menghapus sesi Penyimpanan lokal menggunakan hapusBarang() metode. Anda harus meneruskan kunci sebagai parameter ke metode ini untuk menghapus pasangan nilai kunci. Jika kunci ada, metode akan menghapus pasangan nilai kunci dan jika kunci tidak ada, metode tidak akan melakukan apa pun.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Cara Menghapus Semua Item di Penyimpanan lokal
Anda dapat menghapus semua item di penyimpanan lokal menggunakan jernih() metode. Anda tidak perlu memberikan parameter apa pun ke metode ini.
jendela.penyimpanan lokal.jernih();Cara Menemukan Panjang Penyimpanan lokal
Anda dapat menemukan panjang penyimpanan lokal menggunakan penyimpanan lokal.panjang Properti.
membiarkan len = localStorage.length;
menghibur.log (len);Cara Mendapatkan Kunci pada Posisi yang Diberikan
Anda bisa mendapatkan kunci pada posisi tertentu menggunakan kunci() metode. Metode ini menerima indeks sebagai parameter.
membiarkan d = penyimpanan lokal.key(1);
menghibur.log (d);Metode key() terutama digunakan untuk mengulang semua item di localStorage.
Cara Melewati Semua Item di Penyimpanan lokal
Anda dapat mengulangi semua item di localStorage menggunakan for loop.
untuk (membiarkan saya = 0; i < localStorage.length; saya++){
membiarkan kunci = localStorage.key (i);
membiarkan nilai = localStorage.getItem (kunci);
menghibur.log (kunci, nilai);
}Metode key() menerima indeks sebagai argumen dan mengembalikan kunci yang sesuai. Metode getItem() menerima kunci sebagai argumen dan mengembalikan nilai yang sesuai. Terakhir, konsol.log() metode mencetak pasangan nilai kunci.
Proyek JavaScript Sederhana Berdasarkan Penyimpanan lokal
Dengan pemahaman tentang metode dasarnya, Anda dapat mengembangkan proyek JavaScript sederhana berdasarkan penyimpanan lokal. Dalam proyek ini, Anda akan membuat aplikasi penghitung skor yang akan menambah dan mengurangi jumlah skor dengan mengklik tombol. Juga, Anda akan menerapkan fungsionalitas untuk menghapus semua item di penyimpanan lokal.
Buat sebuah index.html dan script.js file di folder baru dan buka file di editor kode favorit Anda. Gunakan kode HTML berikut untuk membuat antarmuka aplikasi penghitung skor:
<!DOCTYPE html>
<html>
<tubuh>
<h1>penyimpanan lokal dalam JavaScript</h1>
<tombol klik ="peningkatanPenghitung()" jenis="tombol">Tingkatkan Skor</button>
<tombol klik ="penurunanPenghitung()" jenis="tombol">Turunkan Skor</button>
<tombol klik ="hapus penghitung()" jenis="tombol">Hapus Penyimpanan lokal</button>
<p>Skor:</p>
<p id ="skor"></p>
<p>Klik pada "Tingkatkan Skor" tombol untuk meningkatkan jumlah skor</p>
<p>Klik pada "Turunkan Skor" tombol untuk mengurangi jumlah skor</p>
<p>Klik pada "Hapus Penyimpanan lokal" tombol untuk menghapus penyimpanan lokal</p>
<p>
Anda dapat menutup tab browser (atau jendela), dan mencoba lagi.
Anda akan melihat bahwa datanya masih ada danadalahbukan hilang bahkan setelah ditutup
browser.
</p>
<skrip src="script.js"></script>
</body>
</html>Halaman ini berisi tiga tombol: Tingkatkan Skor, Turunkan Skor, dan Hapus Penyimpanan lokal. Tombol-tombol ini memanggil peningkatanPenghitung(), penurunanPenghitung(), dan hapus penghitung() fungsi masing-masing. Gunakan kode berikut untuk menambahkan fungsionalitas ke aplikasi penghitung skor menggunakan JavaScript.
fungsimeningkatkanPenghitung() {
var menghitung = Nomor(jendela.localStorage.getItem("hitungan"));
hitung += 1;
window.localStorage.setItem("menghitung", menghitung);
document.getElementById("skor").innerHTML = hitung;
}Itu peningkatanPenghitung() fungsi mengambil hitungan menggunakan metode getItem(). Ini mengubah hasilnya menjadi Angka, karena getItem() mengembalikan string, dan menyimpannya dalam variabel hitungan.
Pertama kali Anda mengklik Tingkatkan Skor tombol akan berada sebelum panggilan apa pun ke setItem(). Browser Anda tidak akan menemukan menghitung kunci di localStorage, sehingga akan mengembalikan nilai nol. Karena fungsi Number() mengembalikan 0 untuk input nol, tidak memerlukan penanganan kasus khusus. Kode dapat dengan aman meningkatkan nilai hitungan sebelum menyimpannya dan memperbarui dokumen untuk menampilkan nilai baru.
fungsipenurunanPenghitung() {
var menghitung = Nomor(jendela.localStorage.getItem("hitungan"));
hitung -= 1;
window.localStorage.setItem("menghitung", menghitung);
document.getElementById("skor").innerHTML = hitung;
}Itu penurunanPenghitung() fungsi mengambil dan memeriksa data seperti peningkatanPenghitung() melakukan. Ini mengurangi menghitung variabel dengan 1, yang default ke 0.
fungsijelasKonter() {
jendela.penyimpanan lokal.jernih();
document.getElementById("skor").innerHTML = "";
}Terakhir, hapus penghitung() fungsi menghapus semua data dari localStorage menggunakan jernih() metode.
Lakukan Lebih Banyak Dengan Penyimpanan lokal
Objek localStorage memiliki beberapa metode termasuk setItem(), getItem(), removeItem(), dan clear(). Meskipun penyimpanan lokal mudah digunakan, menyimpan informasi sensitif tidak aman. Tapi itu adalah pilihan yang baik untuk mengembangkan proyek yang tidak memerlukan banyak penyimpanan dan tidak melibatkan informasi sensitif.
Ingin membangun proyek JavaScript berbasis Penyimpanan lokal lainnya? Berikut adalah aplikasi daftar tugas dasar yang dapat Anda kembangkan menggunakan HTML, CSS, dan JavaScript.