Memahami Storan Tempatan dalam JavaScript

Storan Tempatan ialah API berasaskan penyemak imbas penting yang membolehkan pembangun menyimpan, mendapatkan semula dan mengurus data secara langsung dalam penyemak imbas. Tidak seperti storan sesi, Storan Tempatan berterusan walaupun selepas penyemak imbas ditutup, menjadikannya sesuai untuk menyimpan pilihan pengguna, tetapan apl atau apa-apa jenis data yang perlu disimpan di antara sesi. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa data adalah terhad kepada penyemak imbas di mana ia disimpan. Contohnya, data yang disimpan dalam Chrome tidak akan tersedia dalam Firefox.

Cara Storan Tempatan Berfungsi

Sebelum bekerja dengan Storan Tempatan, adalah penting untuk memahami bahawa ia menyimpan data dalam format JSON. Ini bermakna jika anda menyimpan objek JavaScript, anda perlu menukarnya kepada JSON terlebih dahulu dan menukarnya semula kepada objek JavaScript apabila mendapatkan semula data.

Ini contohnya:

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

Melihat Storan Setempat dalam Penyemak Imbas Anda

Anda boleh melihat dan berinteraksi dengan data yang disimpan dalam Storan Tempatan menggunakan Alat Pembangun penyemak imbas anda. Berikut ialah panduan ringkas:

1. Klik kanan pada mana-mana halaman web dan pilih "Periksa" atau tekan F12.
2. Buka tab Aplikasi.
3. Dalam panel kiri, cari Storan Tempatan di bawah bahagian storan dan anda akan melihat data tersimpan anda dipaparkan sebagai pasangan nilai kunci.

Mencipta Rekod Baharu dalam Storan Tempatan

Untuk menyimpan data dalam Storan Tempatan, ikut langkah berikut:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

Dalam contoh ini:

• Kunci ialah "pengguna".
• Nilai ialah objek bertali dalam format JSON.

Membaca Data daripada Storan Tempatan

Apabila anda mendapatkan semula data daripada Storan Tempatan, anda perlu menukar rentetan JSON kembali kepada objek JavaScript:

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

Mengemas kini Data Sedia Ada dalam Storan Tempatan

Mengemas kini data dalam Storan Tempatan adalah serupa dengan mencipta rekod baharu—pada asasnya, anda menulis ganti data lama:

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

Memadam Data daripada Storan Tempatan

Akhir sekali, untuk mengalih keluar rekod daripada Storan Tempatan, anda boleh menggunakan kaedah removeItem:

localStorage.removeItem("user"); // Remove the "user" record

Ini akan memadamkan rekod yang dikaitkan dengan kunci "pengguna".

Kesimpulan

Storan Tempatan ialah alat yang berkuasa dan mudah digunakan untuk kegigihan data pihak pelanggan dalam JavaScript. Dengan memahami cara membuat, membaca, mengemas kini dan memadam rekod, anda boleh menyimpan data penting yang berterusan merentas sesi penyemak imbas, meningkatkan pengalaman pengguna. Walau bagaimanapun, adalah penting juga untuk diingat bahawa Storan Tempatan terhad kepada penyemak imbas dan domain tertentu, dan ia tidak boleh digunakan untuk data sensitif, kerana ia tidak disulitkan.

Dengan memasukkan Storan Tempatan ke dalam aplikasi anda, anda boleh meningkatkan kefungsian mereka tanpa memerlukan penyelesaian bahagian belakang penuh untuk tugasan tertentu.

---

Petikan:

• Dokumen Web MDN, "LocalStorage", https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Atas ialah kandungan terperinci Memahami Storan Tempatan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!