HTML5 memperkenalkan dua mekanisme untuk penyimpanan data pelanggan: localStorage
dan sessionStorage
. Kedua -duanya membenarkan aplikasi web menyimpan data dalam penyemak imbas pengguna, tetapi mereka berbeza dalam skop dan kegigihan. Inilah cara anda boleh menggunakannya:
Memeriksa sokongan:
Sebelum menggunakan localStorage
atau sessionStorage
, periksa sama ada penyemak imbas menyokong mereka:
<code class="javascript">if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage } else { // No web storage support }</code>
Menyimpan data:
Kedua -dua localStorage
dan sessionStorage
menggunakan kaedah yang sama untuk menyimpan data. Anda boleh menyimpan pasangan nilai kunci di mana kunci dan nilai adalah rentetan:
<code class="javascript">localStorage.setItem("key", "value"); sessionStorage.setItem("key", "value");</code>
Anda juga boleh menggunakan sintaks localStorage.key = "value"
atau sessionStorage.key = "value"
, tetapi setItem
lebih disukai untuk konsistensi dan untuk mengelakkan kaedah atau sifat penggantian.
Mendapatkan data:
Untuk mendapatkan data, gunakan getItem
:
<code class="javascript">var data = localStorage.getItem("key"); var data = sessionStorage.getItem("key");</code>
Jika kunci tidak wujud, getItem
mengembalikan null
.
Mengeluarkan data:
Untuk membuang item tertentu:
<code class="javascript">localStorage.removeItem("key"); sessionStorage.removeItem("key");</code>
Untuk membersihkan semua data:
<code class="javascript">localStorage.clear(); sessionStorage.clear();</code>
Menyimpan objek:
Oleh kerana rentetan kedai localStorage
dan sessionStorage
, objek mesti bersiri. Gunakan JSON.stringify
untuk menukar objek ke rentetan sebelum menyimpan dan JSON.parse
untuk menukarnya kembali:
<code class="javascript">var obj = {name: "John", age: 30}; localStorage.setItem("user", JSON.stringify(obj)); var retrievedObj = JSON.parse(localStorage.getItem("user"));</code>
localStorage
dan sessionStorage
mempunyai beberapa perbezaan utama:
Skop:
localStorage
tersedia untuk semua tingkap atau tab dari asal yang sama (domain, protokol, dan pelabuhan).sessionStorage
terhad kepada tetingkap/tab yang menciptanya. Jika tetingkap/tab ditutup, data hilang.Kegigihan:
localStorage
berterusan walaupun selepas penyemak imbas ditutup dan dibuka semula.sessionStorage
dibersihkan apabila tetingkap/tab ditutup.Penggunaan:
localStorage
untuk data yang harus tersedia dalam pelbagai sesi (contohnya, keutamaan pengguna, data cache).sessionStorage
untuk data yang hanya berkaitan semasa sesi tunggal (misalnya, data borang sementara).Walaupun storan web HTML5 mudah, ia mempunyai batasan keselamatan yang mesti anda pertimbangkan:
Kepekaan data:
Kawalan Akses:
Integriti Data:
Konteks selamat:
Mengehadkan pendedahan data:
Pengurusan localStorage
dan sessionStorage
yang berkesan melibatkan penganjuran data dengan cekap dan mengekalkan prestasi:
Namespacing:
myApp.userSettings
bukannya userSettings
.Data berstruktur:
Simpan data dalam format berstruktur seperti JSON. Ini menjadikannya lebih mudah untuk mengurus dan mengambil struktur data yang kompleks:
<code class="javascript">var settings = { theme: "dark", notifications: true }; localStorage.setItem("myApp.settings", JSON.stringify(settings));</code>
Pengindeksan:
Untuk dataset yang besar, pertimbangkan untuk melaksanakan indeks atau sistem metadata untuk mencari dan mengambil data dengan cepat:
<code class="javascript">var index = { user1: "myApp.user1.data", user2: "myApp.user2.data" }; localStorage.setItem("myApp.userIndex", JSON.stringify(index));</code>
Versi Data:
Melaksanakan versi untuk struktur data untuk menguruskan kemas kini dan memastikan keserasian:
<code class="javascript">var data = { version: "1.0", userData: { ... } }; localStorage.setItem("myApp.userData", JSON.stringify(data));</code>
Prestasi:
localStorage.length
untuk menyemak bilangan item yang disimpan dan uruskan data dengan sewajarnya.Pembersihan biasa:
Semak semula dan membersihkan data usang untuk mengelakkan penggunaan storan yang tidak perlu:
<code class="javascript">for (var i = 0; i </code>
Dengan mengikuti amalan ini, anda boleh mengurus dan menganjurkan data yang disimpan di localStorage
dan sessionStorage
, memastikan penyimpanan data sisi pelanggan yang cekap dan selamat.
Atas ialah kandungan terperinci Bagaimanakah saya menggunakan penyimpanan web HTML5 (LocalStorage dan sessionStorage) untuk penyimpanan data sisi klien?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!