Rumah >hujung hadapan web >html tutorial >Fahami localstorage: Apakah ciri pangkalan datanya?
Fahami localstorage: Apakah ciri pangkalan datanya?
- 王林asal
- 2024-01-13 13:43:15685semak imbas
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); -
Baca data:
var username = localStorage.getItem('username'); var age = localStorage.getItem('age'); -
Padam data:
localStorage.removeItem('username'); -
Sepatutnya kosongkan semua data:
umur hanya menyokong menyimpan data jenis rentetan. Jika anda ingin menyimpan jenis data lain, anda perlu menukarnya kepada rentetan.
Berikut ialah contoh aplikasi mudah yang menunjukkan cara menggunakan storan setempat untuk melaksanakan senarai tugasan yang mudah.
HTML:
localStorage.clear();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>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!