Mekanisme localStorage menyediakan jenis objek penyimpanan web yang memungkinkan Anda menyimpan dan mengambil data di browser. Anda dapat menyimpan dan mengakses data tanpa kedaluwarsa;
Anda biasanya akan mengakses localStorage menggunakan JavaScript. Dengan sedikit kode, Anda dapat membuat proyek contoh, seperti penghitung skor. Ini akan menunjukkan bagaimana Anda dapat menyimpan dan mengakses data persisten hanya dengan menggunakan kode sisi klien
Apa itu penyimpanan lokal dalam JavaScript?
Objek localStorage adalah bagian dari API penyimpanan web yang didukung sebagian besar browser web. Anda dapat menyimpan data sebagai key-value pair menggunakan localStorage. Kunci dan nilai unik harus dalam format UTF-16 DOM String
Jika Anda ingin menyimpan objek atau larik, Anda harus mengonversinya menjadi string menggunakan JSON. stringify[] metode. Anda dapat menyimpan hingga 5 MB data di penyimpanan lokal. Selain itu, semua jendela dengan asal yang sama dapat membagikan data penyimpanan lokal situs tersebut
Browser tidak akan menghapus data ini bahkan saat pengguna menutupnya. Ini akan tersedia untuk situs web yang membuatnya selama sesi mendatang. Namun, Anda sebaiknya tidak menggunakan localStorage untuk data sensitif karena skrip lain yang berjalan di halaman yang sama dapat mengaksesnya
penyimpanan lokal vs. sessionStorage
Objek localStorage dan sessionStorage adalah bagian dari Web Storage API yang menyimpan key-value pair secara lokal. Semua browser modern mendukung keduanya. Dengan localStorage, data tidak kedaluwarsa bahkan setelah pengguna menutup browser mereka. Ini berbeda dengan 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 repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung dari proyek penghitung skor, Anda dapat melihat demo langsungnya
Bagaimana Cara Kerja Penyimpanan Lokal?
Anda dapat mengakses fungsionalitas localStorage melalui Window. properti penyimpanan lokal. 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 metode setItem[]. 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 nilainya. Jika Anda ingin menyimpan array atau objek, Anda harus mengubahnya menjadi string. Anda dapat mengonversi array atau objek menjadi string menggunakan JSON. stringify[] metode
window.localStorage.setItem['Python', 'Guido van Rossum'];
const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem['result', JSON.stringify[student]];
window.localStorage.setItem['marks', JSON.stringify[scores]];
_Cara Membaca Data Dari localStorage
Anda dapat membaca data dari localStorage menggunakan metode getItem[]. Metode ini menerima kunci sebagai parameter dan mengembalikan nilai sebagai string
let data1 = window.localStorage.getItem['Python'];
let data2 = window.localStorage.getItem['result'];
console.log[data1];
console.log[data2];
Ini menghasilkan output berikut
Guido van Rossum
{"name":"Yuvraj","marks":85,"subject":"Machine Learning"}
Jika Anda ingin mengonversi hasil dari string menjadi objek, Anda harus menggunakan JSON. mengurai[] metode
let data2 = JSON.parse[window.localStorage.getItem['result']];
console.log[data2];
_Cara Menghapus Sesi Penyimpanan Lokal
Anda dapat menghapus sesi localStorage menggunakan metode removeItem[]. 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 metode clear[]. Anda tidak perlu meneruskan parameter apa pun ke metode ini
window.localStorage.clear[];
_Cara Menemukan Panjang Penyimpanan Lokal
Anda dapat menemukan panjang localStorage menggunakan localStorage. properti panjang
let len = localStorage.length;
console.log[len];
Cara Mendapatkan Kunci pada Posisi yang Diberikan
Anda bisa mendapatkan kunci pada posisi tertentu menggunakan metode key[]. Metode ini menerima indeks sebagai parameter
let d = localStorage.key[1];
console.log[d];
_Metode key[] terutama digunakan untuk mengulang semua item di localStorage
Cara Mengulangi Semua Item di penyimpanan lokal
Anda dapat mengulangi semua item di penyimpanan lokal menggunakan loop for
for [let i = 0; i < localStorage.length; i++]{
let key = localStorage.key[i];
let value = localStorage.getItem[key];
console.log[key, value];
}
_Metode key[] menerima indeks sebagai argumen dan mengembalikan kunci yang sesuai. Metode getItem[] menerima kunci sebagai argumen dan mengembalikan nilai yang sesuai. Terakhir, konsol. metode log[] mencetak pasangan kunci-nilai
Proyek JavaScript Sederhana Berdasarkan penyimpanan lokal
Dengan memahami 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 sesuai dengan klik tombol. Selain itu, Anda akan menerapkan fungsionalitas untuk menghapus semua item di penyimpanan lokal
Buat indeks. html dan skrip. js di folder baru dan buka file di editor kode favorit Anda. Gunakan kode HTML berikut untuk membuat antarmuka untuk aplikasi penghitung skor
window.localStorage.setItem['Python', 'Guido van Rossum'];
const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem['result', JSON.stringify[student]];
window.localStorage.setItem['marks', JSON.stringify[scores]];
_0Halaman ini berisi tiga tombol. Tingkatkan Skor, Kurangi Skor, dan Hapus penyimpanan lokal. Tombol-tombol ini masing-masing memanggil fungsi increaseCounter[], lowerCounter[], dan clearCounter[]. Gunakan kode berikut untuk menambahkan fungsionalitas ke aplikasi penghitung skor menggunakan JavaScript
window.localStorage.setItem['Python', 'Guido van Rossum'];
const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem['result', JSON.stringify[student]];
window.localStorage.setItem['marks', JSON.stringify[scores]];
_1Fungsi increaseCounter[] mengambil hitungan menggunakan metode getItem[]. Itu mengubah hasilnya menjadi Angka, karena getItem[] mengembalikan string, dan menyimpannya dalam variabel hitungan
Pertama kali Anda mengklik tombol Tingkatkan Skor adalah sebelum panggilan apa pun ke setItem[]. Browser Anda tidak akan menemukan kunci hitung di localStorage, sehingga akan mengembalikan nilai nol. Karena fungsi Number[] mengembalikan 0 untuk input null, fungsi ini tidak memerlukan penanganan kasus khusus. Kode dapat dengan aman meningkatkan nilai hitungan sebelum menyimpannya dan memperbarui dokumen untuk menampilkan nilai baru
window.localStorage.setItem['Python', 'Guido van Rossum'];
const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem['result', JSON.stringify[student]];
window.localStorage.setItem['marks', JSON.stringify[scores]];
_2Fungsi reduceCounter[] mengambil dan memeriksa data seperti halnya increaseCounter[]. Ini mengurangi variabel hitungan dengan 1, yang defaultnya adalah 0
window.localStorage.setItem['Python', 'Guido van Rossum'];
const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem['result', JSON.stringify[student]];
window.localStorage.setItem['marks', JSON.stringify[scores]];
_3Terakhir, fungsi clearCounter[] menghapus semua data dari localStorage menggunakan metode clear[]
Lakukan Lebih Banyak Dengan penyimpanan lokal
Objek localStorage memiliki beberapa metode termasuk setItem[], getItem[], removeItem[], dan clear[]. Meskipun localStorage mudah digunakan, tidak aman untuk menyimpan informasi sensitif. Namun merupakan pilihan yang baik untuk mengembangkan proyek yang tidak memerlukan banyak penyimpanan dan tidak melibatkan informasi sensitif apa pun
Ingin membangun proyek JavaScript berbasis penyimpanan lokal lainnya?