Fahami localstorage: Apakah ciri pangkalan datanya?-html tutorial-php.cn

Fahami localstorage: Apakah ciri pangkalan datanya?

王林

Lepaskan： 2024-01-13 13:43:15

asal

686 orang telah melayarinya

Fahami localstorage: Apakah ciri pangkalan datanya?

Meneroka storan setempat: Apakah jenis pangkalan data itu?

Ikhtisar:
Dalam pembangunan web moden, penyimpanan dan pengurusan data adalah bahagian yang sangat penting. Memandangkan teknologi terus maju, teknologi pangkalan data baharu turut muncul. Salah satunya ialah localstorage. Artikel ini akan memperkenalkan konsep, penggunaan dan beberapa contoh kod biasa localstorage untuk membantu pembaca memahami dan menggunakan localstorage dengan lebih baik.

Apakah storan tempatan?
Localstorage ialah mekanisme yang disediakan oleh penyemak imbas untuk penyimpanan data sebelah pelanggan. Ia membenarkan program JavaScript untuk menyimpan dan membaca data dalam penyemak imbas tanpa membuat permintaan rangkaian. Berbanding dengan pangkalan data berasaskan pelayan tradisional, kelebihan localstorage ialah ia boleh menyimpan data dengan lebih pantas dan data boleh disimpan pada cakera tempatan untuk masa yang lama.

Tujuan storan setempat:

Cache tempatan: Dengan menggunakan storan setempat, beberapa data yang kerap digunakan boleh disimpan secara setempat untuk mempercepatkan pemuatan halaman. Contohnya, simpan URL fail sumber statik dalam localstorage untuk memuatkan helaian gaya dan fail skrip yang diperlukan untuk halaman dengan cepat.
Tetapan Peribadi Pengguna: localstorage bagus untuk menyimpan tetapan peribadi pengguna. Contohnya, bahasa pilihan pengguna, tema, dsb. boleh disimpan dalam storan setempat supaya tetapan ini boleh digunakan pada kali berikutnya halaman dibuka.

Contoh kod menggunakan localstorage:
Berikut ialah contoh kod untuk beberapa operasi localstorage yang biasa digunakan.

Simpan data:

localStorage.setItem('username', 'John');
localStorage.setItem('age', 25);

Salin selepas log masuk

Baca data:

var username = localStorage.getItem('username');
var age = localStorage.getItem('age');

Salin selepas log masuk

Padam data:
```
localStorage.removeItem('username');
```
Salin selepas log masuk
Sepatutnya kosongkan semua data:
umur hanya menyokong menyimpan data jenis rentetan. Jika anda ingin menyimpan jenis data lain, anda perlu menukarnya kepada rentetan.

Sampel aplikasi:

Berikut ialah contoh aplikasi mudah yang menunjukkan cara menggunakan storan setempat untuk melaksanakan senarai tugasan yang mudah.

HTML:

localStorage.clear();

Salin selepas log masuk

JavaScript (app.js):

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
  </head>
  <body>
    <input id="taskInput" type="text" placeholder="Add a task..." />
    <button onclick="addTask()">Add</button>
    <ul id="taskList"></ul>

    <script src="app.js"></script>
  </body>
</html>

Salin selepas log masuk

Kod sampel di atas menunjukkan cara menggunakan localstorage untuk menyimpan tugasan yang ditambah pengguna, dan membaca data daripada localstorage dan memaparkannya selepas halaman dimuatkan.

Kesimpulan:

Dengan menggunakan localstorage, kami boleh menyimpan dan membaca data dalam penyemak imbas dengan mudah dan melaksanakan beberapa fungsi biasa, seperti caching tempatan dan pemperibadian pengguna. Dalam pembangunan web sebenar, penggunaan storan setempat yang munasabah boleh membawa pengalaman yang lebih baik kepada pengguna berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Fahami localstorage: Apakah ciri pangkalan datanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!