Bagaimanakah saya menggunakan API Penyimpanan Web HTML5 (LocalStorage dan sessionStorage) untuk penyimpanan data sisi klien?

Menggunakan API Penyimpanan Web HTML5 (LocalStorage dan SessionStorage) untuk penyimpanan data sisi klien

API Penyimpanan Web HTML5 menyediakan dua mekanisme untuk menyimpan pasangan nilai utama data dalam pelayar web pengguna: localStorage dan sessionStorage . Kedua-duanya menawarkan cara mudah untuk meneruskan data di sisi klien, menghapuskan keperluan untuk perjalanan pusingan pelayan yang kerap untuk mengambil atau mengemas kini sejumlah kecil maklumat. Ini meningkatkan prestasi aplikasi dan pengalaman pengguna dengan ketara, terutamanya untuk tugas -tugas seperti mengingati keutamaan pengguna, mengekalkan kereta membeli -belah, atau menyimpan keadaan aplikasi sementara.

Untuk menggunakan API, anda mengaksesnya melalui objek window penyemak imbas. localStorage berterusan data selama -lamanya, walaupun selepas penyemak imbas ditutup dan dibuka semula. Walau bagaimanapun, data sessionStorage hanya tersedia untuk tempoh sesi penyemak imbas tunggal. Menutup tetingkap atau tab penyemak imbas membersihkan data sessionStorage .

Berikut adalah contoh asas penetapan dan pengambilan data menggunakan localStorage :

 <code class="javascript">// Store data localStorage.setItem('username', 'JohnDoe'); // Retrieve data let username = localStorage.getItem('username'); console.log(username); // Output: JohnDoe // Remove data localStorage.removeItem('username'); // Clear all data localStorage.clear();</code>

Kaedah yang sama ( setItem , getItem , removeItem , clear ) terpakai kepada sessionStorage juga. Pilihan antara localStorage dan sessionStorage bergantung kepada keperluan khusus aplikasi anda.

Perbezaan utama antara LocalStorage dan sessionStorage

Perbezaan utama antara localStorage dan sessionStorage terletak pada kegigihan mereka:

• LocalStorage: Data berterusan selama -lamanya merentasi sesi penyemak imbas. Ini sesuai untuk menyimpan keutamaan pengguna, tetapan, atau maklumat lain yang perlu dikekalkan walaupun selepas pengguna menutup penyemak imbas dan kembali kemudian. Data tetap disimpan sehingga secara eksplisit dikeluarkan menggunakan localStorage.removeItem() atau localStorage.clear() .
• SesiStorage: Data hanya tersedia untuk tempoh sesi penyemak imbas tunggal. Menutup tab penyemak imbas atau tetingkap membersihkan semua data sessionStorage . Ini sesuai untuk data sementara yang hanya relevan dalam satu sesi, seperti item dalam keranjang belanja atau keadaan aplikasi sementara.

Satu lagi perbezaan halus ialah sessionStorage tidak dikongsi di seluruh tab pelayar atau tingkap yang berbeza yang berasal dari asal yang sama. Jika anda membuka tab berganda untuk laman web yang sama, setiap tab akan mempunyai sessionStorage bebas sendiri. localStorage , sebaliknya, dikongsi di semua tab dan tingkap dari asal yang sama.

Mengendalikan kebimbangan keselamatan dan privasi yang berpotensi semasa menggunakan storan web html5

Walaupun mudah, menggunakan storan web HTML5 memperkenalkan potensi keselamatan dan kebimbangan privasi:

• Pendedahan Data: Kod JavaScript yang berniat jahat yang berjalan di laman web yang sama (melalui kelemahan XSS, misalnya) boleh mengakses dan berpotensi memanipulasi data yang disimpan dalam localStorage dan sessionStorage .
• Kebimbangan Privasi: Data yang disimpan di localStorage dan sessionStorage hanya boleh diakses ke laman web yang menyimpannya, tetapi maklumat sensitif tidak boleh disimpan secara langsung. Pertimbangkan menggunakan teknik penyulitan atau hashing untuk data sensitif sebelum menyimpannya.
• Had Penyimpanan: Penyemak imbas mengenakan had ke atas jumlah data yang boleh disimpan menggunakan storan web. Melebihi had ini boleh menyebabkan kesilapan. Sentiasa berhati -hati dengan saiz data yang anda simpan.

Untuk mengurangkan risiko ini:

• Kurangkan data sensitif: Elakkan menyimpan maklumat yang sangat sensitif seperti kata laluan, nombor kad kredit, atau maklumat yang dapat dikenal pasti secara peribadi (PII) secara langsung dalam penyimpanan web.
• Penyulitan: Jika anda mesti menyimpan data sensitif, menyulitkannya sebelum menyimpannya dalam storan web. Gunakan algoritma penyulitan yang kuat dan uruskan kekunci penyulitan anda dengan selamat.
• Pengesahan Input: Mengesahkan semua data sebelum menyimpannya untuk mengelakkan serangan suntikan.
• HTTPS: Sentiasa gunakan HTTPS untuk memastikan data yang dihantar ke dan dari laman web anda disulitkan dan dilindungi dari eavesdropping.

Mendapatkan dan memanipulasi data yang disimpan menggunakan API Penyimpanan Web HTML5

Pengambilan data adalah mudah menggunakan getItem() . Memanipulasi data memerlukan pengambilannya, mengubahnya, dan kemudian menyimpannya kembali menggunakan setItem() .

 <code class="javascript">// Retrieve data let storedData = localStorage.getItem('myData'); // Parse JSON data (if stored as JSON) let myObject = JSON.parse(storedData); // Modify the data myObject.name = "Updated Name"; // Stringify the object back to JSON let updatedData = JSON.stringify(myObject); // Store the updated data localStorage.setItem('myData', updatedData);</code>

Contoh ini menunjukkan pengambilan data yang disimpan sebagai objek JSON, mengubahnya, dan kemudian menyimpan objek yang dikemas kini kembali ke localStorage . Ingatlah untuk sentiasa menggunakan JSON.stringify() sebelum menyimpan objek atau tatasusunan dan JSON.parse() apabila mengambilnya. Untuk rentetan atau nombor yang mudah, penggunaan langsung getItem() dan setItem() cukup. Anda juga boleh melangkah melalui localStorage menggunakan for dan harta panjangnya untuk mengakses semua pasangan nilai kunci yang disimpan. Prinsip yang sama berlaku untuk sessionStorage .

Atas ialah kandungan terperinci Bagaimanakah saya menggunakan API Penyimpanan Web HTML5 (LocalStorage dan sessionStorage) untuk penyimpanan data sisi klien?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!