Cara menggunakan localstorage

Cara menggunakan localstorage: 1. Simpan data dalam localstorage; 3. Kemas kini data yang disimpan; 5. Kosongkan storan setempat; objek kompleks. Pengenalan terperinci: 1. Simpan data dalam localstorage, simpan data dalam localStorage, dsb.

`localStorage` ialah API Web yang menyimpan data dalam penyemak imbas pelanggan. Ia menyediakan sistem storan nilai kunci mudah yang boleh digunakan untuk menyimpan data dalam penyemak imbas supaya ia boleh dikekalkan antara halaman yang berbeza atau antara sesi penyemak imbas. Berikut ialah kaedah terperinci tentang cara menggunakan `localStorage`:

1 Simpan data dalam `localStorage`

Untuk menyimpan data dalam `localStorage`, anda perlu menggunakan kaedah `localStorage.setItem(key, value)`. , dengan `kunci` ialah kunci data yang akan disimpan dan `nilai` ialah nilai data yang akan disimpan. Contohnya:

localStorage.setItem("username", "john_doe");

Ini akan menyimpan nama pengguna "john_doe" dalam `localStorage` dan mengaitkannya dengan kunci "nama pengguna".

2. Dapatkan data daripada `localStorage`:

Untuk mendapatkan semula data daripada `localStorage`, anda boleh menggunakan kaedah `localStorage.getItem(key)`, dengan `key` ialah kunci data yang hendak diambil. Contohnya:

const username = localStorage.getItem("username");
console.log(username); // 输出 "john_doe"

Ini akan mendapatkan semula data "nama pengguna" yang disimpan dalam `localStorage` dan menetapkannya kepada pembolehubah `nama pengguna`.

3. Kemas kini data yang disimpan:

Jika anda ingin mengemas kini data yang disimpan dalam `localStorage`, hanya gunakan kaedah `setItem()` dan berikan nilai baharu untuk kunci yang sama. Nilai lama akan digantikan dengan nilai baru. Contohnya:

localStorage.setItem("username", "jane_doe");

Ini akan menggantikan "john_doe" yang disimpan sebelum ini dengan nilai baharu "jane_doe".

4. Padam data:

Untuk memadam data daripada `localStorage`, anda boleh menggunakan kaedah `localStorage.removeItem(key)`, dengan `key` ialah kunci data yang akan dipadamkan. Contohnya:

localStorage.removeItem("username");

Ini akan memadamkan data "nama pengguna" yang disimpan dalam `localStorage`.

5 Kosongkan `localStorage`:

Jika anda perlu memadamkan semua data yang disimpan dalam `localStorage` sekaligus, anda boleh menggunakan kaedah `localStorage.clear()`. Ini akan mengosongkan keseluruhan `localStorage`. Contohnya:

localStorage.clear();

6 Semak sama ada `localStorage` tersedia:

Sebelum menggunakan `localStorage`, sebaiknya semak sama ada penyemak imbas menyokongnya, kerana dalam sesetengah kes, penyemak imbas mungkin telah melumpuhkan akses kepada `localStorage`. . Anda boleh menyemak sama ada `localStorage` tersedia menggunakan kod berikut:

if (typeof Storage !== "undefined") {
  // 支持 localStorage
  // 在这里使用 localStorage 的操作
} else {
  // 不支持 localStorage
  console.log("对不起，您的浏览器不支持 localStorage。");
}

7 Menyimpan dan mendapatkan semula objek kompleks:

`localStorage` hanya boleh menyimpan rentetan, jadi jika anda ingin menyimpan dan mengambil objek kompleks (seperti objek JavaScript. atau tatasusunan), mereka perlu disirikan kepada rentetan dahulu dan kemudian dinyahsiri apabila menyimpan dan mendapatkan semula. Lazimnya kaedah `JSON.stringify()` digunakan untuk penyirian dan kaedah `JSON.parse()` untuk penyahsiran.

Contohnya, menyimpan objek JavaScript dengan berbilang sifat:

const user = {
  username: "jane_doe",
  email: "jane@example.com"
};
localStorage.setItem("user", JSON.stringify(user));
然后，当你需要检索它时，将其从字符串反序列化回对象：
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.username); // 输出 "jane_doe"

Nota dan had:

Walaupun `localStorage` ialah penyelesaian storan sebelah pelanggan yang mudah, terdapat beberapa had dan pertimbangan:

- Had kapasiti: - Kapasiti storan `localStorage` di bawah setiap nama domain biasanya sekitar 5MB, dan mungkin terdapat beberapa perbezaan dalam penyemak imbas yang berbeza. Jika had kapasiti ini melebihi, penyemak imbas mungkin menggesa pengguna mengosongkan storan atau melumpuhkan `localStorage`.

-Dasar asal yang sama: `localStorage` mengikut dasar asal yang sama, yang bermaksud bahawa hanya halaman di bawah nama domain yang sama boleh mengakses data `localStorage` yang sama. Halaman dengan nama domain yang berbeza tidak boleh berkongsi `localStorage`.

-Sekatan jenis data: `localStorage` hanya boleh menyimpan rentetan, jadi data bukan rentetan (seperti objek, tatasusunan, dsb.) perlu disiri menjadi rentetan untuk penyimpanan, dan kemudian dinyahsiri semasa pengambilan semula.

- Privasi dan Keselamatan: Oleh kerana `localStorage` disimpan dalam penyemak imbas pelanggan, ia tidak sesuai untuk menyimpan maklumat sensitif seperti kata laluan atau token. Maklumat sensitif hendaklah disimpan di bahagian pelayan dan dihantar menggunakan protokol komunikasi yang selamat.

- Ketekunan data: Data disimpan di sisi klien, jadi walaupun pengguna menutup penyemak imbas atau memulakan semula komputer, data itu kekal sehingga dipadamkan secara jelas. Ini boleh digunakan untuk membuat tetapan berterusan atau cache setempat.

Secara umumnya, `localStorage` ialah alat storan sisi klien yang ringkas dan berkuasa, sesuai untuk menyimpan data kecil, tetapan pengguna, cache setempat dan senario lain. Tetapi beri perhatian kepada had kapasiti dan isu keselamatannya, serta keperluan bersiri dan penyahseriiran apabila menggunakannya. Jika anda memerlukan penyelesaian storan sisi klien yang lebih maju, anda juga boleh mempertimbangkan untuk menggunakan teknologi seperti IndexedDB atau Web SQL.

Atas ialah kandungan terperinci Cara menggunakan localstorage. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!