Penyimpanan lokal JavaScript – Panduan sederhana dengan contoh

Programming

oleh Vinci terakhir diubah pada 21 Agustus 2022.

Artikel ini untuk pembelajaran Cara menggunakan JavaScript localStorage untuk memasukkan string atau objek ke dalamnya. Ini untuk menyimpan data di browser klien dan menggunakannya saat dibutuhkan.

Penyimpanan data adalah bagian penting dari pemrograman. Ini adalah skenario yang digunakan localStorage untuk menambahkan kegigihan di sisi klien.

  1. Untuk menyimpan sesi dan identitas unik pengguna tamu untuk mengelola status pilihan mereka.
  2. Untuk menyimpan keranjang belanja item yang dipilih di sisi pelanggan.
  3. Untuk menyimpan preferensi bahasa untuk menampilkan konten di situs multibahasa.
  4. Untuk menyimpan preferensi pengguna untuk tampilan data, waktu dan zona waktu seperti yang dipilih di klien.

Mari kita lihat contoh singkat penggunaan JavaScript localStorage untuk menyimpan objek. Menyiapkan objek JSON dari array data dan menyimpannya secara lokal.

Contoh cepat

var animalObject = {
	'Lion': 'Wild',
	'Dog': 'Domestic'
};

// flatten the animal object as a string
animalString = JSON.stringify(animalObject);

//store the string into local storage
localStorage.setItem('animals', animalString);

Keluaran sampel cepat

Masukkan objek localStorage ini di konsol browser pengembang untuk menampilkan output berikut.

Object from local storage: {Lion: 'Wild', Dog: 'Domestic'}

Dalam tutorial sebelumnya, kami menggunakan JavaScript localStorage untuk membuat keranjang belanja persisten.

Lokasi penyimpanan JavaScript Cara menyimpan objek

Apa itu Penyimpanan Lokal?

JavaScript localStorage adalah properti dari objek jendela global. Digunakan untuk menyimpan data untuk transfer dari halaman ke halaman.

Ini adalah salah satu mekanisme penyimpanan yang dicakup oleh Web Storage API.

Itu tidak dapat menggantikan solusi sisi server yang memberikan stabilitas. Tapi, ini adalah mekanisme yang baik untuk situs web non-dinamis.

Ini berisi pegangan untuk mengakses penyimpanan lokal asal browser.

Properti

API Penyimpanan Web

Web Storage API menyediakan dua konsep untuk menyimpan objek dengan data dalam kunci: format nilai.

  1. window.localStorage
  2. window.sessionStorage

Keduanya menggunakan instance Storage yang berbeda dan menangani tindakan secara terpisah.

Objek penyimpanan ini mirip dengan JavaScript localStorage. Tapi, waktu habis.

Hanya valid di sesi browser saat ini. Objek sessionStorage dilewatkan saat browser ditutup dan dimuat ulang.

Waktu kedaluwarsa adalah perbedaan utama antara kedua konsep penyimpanan ini.

Bagaimana cara mengatur dan mendapatkan item Penyimpanan lokal di javascript?

Contoh ini untuk mempelajari penggunaan dasar objek JavaScript localStorage. Ia melakukan tindakan berikut di localStorage tentang a bidang barang

  1. Ke penyetelan Item sebagai pasangan nilai kunci.
  2. Ke Dapatkan nilainya Dari item menjadi kunci
  3. Ke mengambil Satu item kunci
  4. Ke Cerah Seluruh area penyimpanan
  5. Ke Dapatkan kuncinya Berdasarkan posisi indeks item

Kelas localStorage ini berisi fungsi yang digunakan untuk melakukan tindakan di atas. Program ini menggunakan fungsi-fungsi ini dengan parameter yang sesuai.

basics.html

<html>
<head>
<title>JavaScript localStorage Example and how to store a
    JavaScript object</title>
</head>
<body>
    <script>
	// set item in localstorage
	window.localStorage.setItem('king', 'Lion');
	console.log("Local Storage Key-Value = " + JSON.stringify(window.localStorage) + "\n");

	// get item from JavaScript localStorage
	window.localStorage.getItem('king');
	console.log("Local Storage Value = " + window.localStorage.getItem('king') + "\n");

	// to get name of key using index
	var indexPosition = parseInt(window.localStorage.length) -1;
	var KeyName = window.localStorage.key(indexPosition);
	console.log("Local Storage Key = " + KeyName + "\n");

	// remove item from JavaScript localStorage
	window.localStorage.removeItem('king');

	// to clear all items from localStorage
	window.localStorage.clear();
    </script>
</body>
</html>

keluaran

Program di atas menampilkan output berikut. Ini untuk mencetak data Penyimpanan lokal, kunci dan nilainya didasarkan pada panggilan fungsi yang sesuai.

Local Storage Key-Value = {"king":"Lion"}

Local Storage Value = Lion

Local Storage Key = king

Simpan objek JavaScript ke lokasi penyimpanan browser HTML5

Contoh ini untuk menyimpan objek di lokal JavaScript. Untuk mencapai tujuan ini, ia melanjutkan langkah-langkah berikut.

  1. Membuat objek JSON untuk memiliki array properti.
  2. Mengonversi objek ini menjadi string menggunakan JSON stringify.
  3. Kemudian letakkan string JSON di LocalStorage.

Seperti pada contoh awal di atas, ia memanggil getItem() pada kunci objek untuk mendapatkan pemetaan properti.

Output string yang diambil dari localStorage diubah kembali menjadi objek. Contoh menampilkan objek yang dikonversi ke konsol browser.

index.html

<html>
<head>
<title>JavaScript localStorage Example and how to store a
    JavaScript object</title>
</head>
<body>
    <h1>JavaScript localStorage Example and how to store a
        JavaScript object</h1>
    <script>
		// Example: Store JavaScript object in HTML5 browser localStorage
		var animalObject = {
			'Lion' : 'Wild',
			'Dog' : 'Domestic',
			'Tiger' : 'Wild'
		};

		// flatten the object as a string
		animalString = JSON.stringify(animalObject);

		//store the string into local storage
		localStorage.setItem('animals', animalString);

		//retrieve the string from local storage
		var retrievedString = localStorage.getItem('animals');

		// parse the string back to an object
		convertedObject = JSON.parse(retrievedString);

		console.log('Object from local storage: ', convertedObject);
	</script>
</body>
</html>

keluaran

Object from local storage: 
{Lion: 'Wild', Dog: 'Domestic', Tiger: 'Wild'}

Kami mempelajari cara menggunakan JavaScript localStorage untuk menyetel string atau objek dan menggunakannya nanti saat diperlukan.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.