Simpan data javascript penyimpanan lokal

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

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

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

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

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

Terakhir, 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?

Bagaimana cara menyimpan data di penyimpanan lokal menggunakan JavaScript?

Bagaimana cara menyimpan data dengan JavaScript?

Bisakah kita menyimpan data di penyimpanan lokal?

Objek JavaScript mana yang dapat menyimpan data secara lokal?