Penyimpanan sisi pelanggan dengan storan web html5

Penyimpanan Web HTML5 adalah mekanisme penyimpanan klien yang merangkumi LocalStorage dan sessionStorage, bekas penyimpanan berterusan, dan yang terakhir hanya sah semasa sesi. Ia mempunyai kapasiti yang lebih besar dan tidak menghantar data dengan permintaan, dan sesuai untuk mengingati keutamaan pengguna, membentuk pementasan, pengesahan ringan, dan komunikasi silang halaman. Apabila menggunakannya, anda perlu berhati -hati untuk menyimpan rentetan, tiada mekanisme tamat tempoh automatik, operasi penyegerakan boleh menjejaskan prestasi, dan nama subdomain tidak berkongsi data. Adalah disyorkan untuk menyimpan maklumat sensitif pada pelayan atau cookies httponly.

Adakah anda sering menghadapi situasi di mana anda perlu menyimpan beberapa data sementara dalam penyemak imbas anda? Sebagai contoh, ingat status log masuk pengguna, simpan beberapa pilihan, dan tidak mahu menggunakan kuki, yang merupakan cara lama untuk melakukannya? Penyimpanan web HTML5 telah dibuat untuk menyelesaikan masalah ini.

Apakah penyimpanan web html5?

Penyimpanan Web adalah mekanisme penyimpanan klien yang disediakan oleh HTML5, yang terutamanya termasuk dua jenis: localStorage dan sessionStorage . Mereka semua menyimpan data dalam bentuk pasangan nilai utama dalam penyemak imbas, tetapi ada satu perbezaan utama:

• LocalStorage : Data akan disimpan sepanjang masa kecuali cache penyemak imbas dibersihkan secara manual.
• SesiStorage : Hanya sah semasa sesi semasa, data akan dibersihkan selepas menutup halaman atau penyemak imbas.

Berbanding dengan kuki, penyimpanan web mempunyai kapasiti yang lebih besar (secara amnya kira -kira 5MB setiap nama domain), dan ia tidak akan dihantar ke pelayan dengan setiap permintaan, mengurangkan beban pada rangkaian.

Bagaimana cara menggunakan storan web untuk mengakses data?

Ia sebenarnya sangat mudah digunakan, pada dasarnya ia adalah satu perkara yang memanggil beberapa kaedah. Sebagai contoh, jika anda ingin menyimpan nama pengguna pengguna secara tempatan, anda boleh menulis seperti ini:

 localStorage.setItem ('nama pengguna', 'john_doe');

Apabila anda ingin membaca nilai ini kemudian:

 biarkan nama = localStorage.getItem ('nama pengguna');
console.log (nama); // output john_doe

Sekiranya anda ingin memadamkan data tertentu:

 localStorage.removeItem ('nama pengguna');

Sekiranya anda ingin membersihkan semua data:

 localStorage.clear ();

Kaedah ini juga digunakan untuk sessionStorage , tetapi kitaran hayat berbeza.

Harus diingat bahawa penyimpanan web hanya boleh menyimpan rentetan. Jika anda ingin menyimpan objek atau tatasusunan, anda perlu menggunakan JSON.stringify() untuk menukarnya terlebih dahulu:

 biarkan pengguna = {name: 'john_doe', umur: 25};
localStorage.setItem ('user', json.stringify (user));

Apabila dikeluarkan, analisisnya kembali:

 biarkan userData = json.parse (localStorage.getItem ('user'));

Senario mana yang sesuai untuk penyimpanan web?

• Ingat Keutamaan Pengguna : seperti tema laman web, saiz fon, dan lain-lain, dan anda tidak perlu membiarkan pengguna memilih semula setiap kali.
• Borang Penyimpanan Sementara Data : Pengguna secara tidak sengaja menyegarkan halaman selepas mengisi separuh kandungan. Anda boleh menggunakan sessionStorage untuk memulihkan kandungan sebelumnya.
• Maklumat Pengesahan Ringan : Sebagai contoh, JWT Token, walaupun tidak disyorkan untuk meletakkan localStorage untuk masa yang lama (kerana risiko serangan XSS), ia masih biasa dalam beberapa projek pemisahan depan dan belakang.
• Komunikasi Cross Page : Dengan mendengar acara storage , mesej mudah boleh diluluskan di antara pelbagai tab.

Sebagai contoh, apabila anda sedang mengusahakan aplikasi tugasan, tugas-tugas yang ditambah oleh pengguna dapat sementara waktu di localStorage , dan halaman tidak akan hilang walaupun ia disegarkan semula.

Apa yang harus saya perhatikan?

Walaupun penyimpanan web sangat mudah, terdapat beberapa "lubang" untuk memberi perhatian kepada:

• IE8 dan di bawah versi tidak disokong, tetapi tiada siapa yang boleh menggunakannya sekarang, bukan?
• Data yang disimpan hanya boleh menjadi rentetan, dan struktur kompleks perlu mengendalikan siri dan deserialization dengan sendirinya.
• Data tidak boleh tamat tempoh secara automatik, tidak seperti kuki yang boleh menetapkan atribut expires .
• Semua operasi disegerakkan, dan operasi data yang besar boleh menjejaskan prestasi.
• Data antara subdomain yang berbeza tidak dikongsi, sebagai contoh, a.example.com dan b.example.com masing -masing mempunyai ruang penyimpanan sendiri.

Jika aplikasi anda mempunyai keperluan keselamatan yang tinggi, seperti maklumat sensitif pengguna, disarankan untuk meletakkannya dalam kuki atau pelayan httponly.

Pada dasarnya itu sahaja. Penyimpanan web tidak rumit tetapi mudah untuk mengabaikan butiran, terutamanya format data dan aspek keselamatan. Menguasai dengan baik dapat meningkatkan pengalaman front-end anda.

Atas ialah kandungan terperinci Penyimpanan sisi pelanggan dengan storan web html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!