Penyimpanan Web HTML5

jika (modenzr.localstorage) { // Gunakan objek localStorage untuk menyimpan data } else { Alert ('Tidak dapat menyimpan keutamaan pengguna kerana penyemak imbas anda tidak menyokong storan tempatan'); } SetItem ('kunci', 'nilai') membolehkan kami menulis data ke dalam storan tempatan. Pengecualian quota_exceeded_err akan dibuang jika had storan melebihi 5MB. Oleh itu, lebih baik untuk menambah blok cuba/menangkap ke kod penyimpanan semasa menyimpan data.

<span>function setSettings() {
</span><span>if ('localStorage' in window && window['localStorage'] !== null) {
</span>	<span>try {
</span>		<span>var favcolor = document.getElementById('favcolor').value;
</span>		<span>var fontwt = document.getElementById('fontwt').value;
</span>		<span>localStorage.setItem('bgcolor', favcolor);
</span>		<span>localStorage.fontweight = fontwt;
</span>	<span>} catch (e) {
</span>		<span>if (e == QUOTA_EXCEEDED_ERR) {
</span>			<span>alert('Quota exceeded!');
</span>		<span>}
</span>	<span>}
</span>	<span>} else {
</span>		<span>alert('Cannot store user preferences as your browser do not support local storage');
</span>	<span>}
</span><span>}</span>

Kami boleh menyemak sama ada data disimpan dalam storan tempatan dengan menggunakan alat pemaju yang datang dengan penyemak imbas. Sebagai contoh, dalam Chrome, klik kanan pada penyemak imbas dan pilih Elemen Periksa. Pilih tab Sumber dan kemudian klik pada item storan tempatan. Kita dapat melihat data yang dipilih pengguna yang disimpan dalam bentuk pasangan kunci/nilai. Halaman web boleh dimuat semula dengan nilai saiz latar belakang dan fon yang ditetapkan oleh pengguna. GetItem ('kunci') membantu dalam mendapatkan data yang disimpan dalam pangkalan data.

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

Fungsi panjang mengambil jumlah nilai di kawasan penyimpanan. Fungsi di atas boleh dipanggil semasa peristiwa onload tag badan seperti berikut Kawasan penyimpanan tempatan boleh dibersihkan dengan menggunakan fungsi yang jelas () atau penyingkiran ('kunci') fungsi. Dalam contoh kami fungsi di bawah dipanggil pada acara klik butang yang jelas.

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

acara penyimpanan

Apabila kami menetapkan atau mengeluarkan data dari storan web, acara penyimpanan akan dipecat pada objek tetingkap. Kami boleh menambah pendengar ke acara dan mengendalikan perubahan storan jika diperlukan.

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

Objek acara mempunyai atribut berikut

• kekunci - harta yang telah berubah
• newValue - Nilai yang baru ditetapkan
• OldValue - Nilai yang disimpan sebelum ini
• url - Laluan URL penuh dari mana peristiwa berasal
• Storagearea - Objek LocalStorage atau SessionStorage

Ingatlah bahawa acara itu akan dipecat hanya pada tingkap lain (tidak pada tetingkap di mana acara itu dicetuskan) dan acara itu tidak dipecat jika tidak ada perubahan dalam data. Kaedah API yang sama boleh digunakan untuk penyimpanan sesi juga kecuali kaedah harus dilaksanakan pada objek sessionStorage.

Kesimpulan

Jadi, sekarang anda boleh mula menggunakan storan web untuk menyimpan keutamaan pengguna, maklumat pengguna, maklumat sesi dan lain -lain. Anda juga boleh mencuba membuat aplikasi yang boleh digunakan sepenuhnya di luar talian dan data yang disimpan semasa luar talian boleh dihantar kembali ke pelayan sebagai kemas kini batch Apabila pengguna dalam talian lagi.

Soalan Lazim (Soalan Lazim) Mengenai Penyimpanan Web HTML5

Apakah perbezaan antara SesiStorage dan LocalStorage dalam penyimpanan web HTML5? Perbezaan utama di antara mereka terletak pada jangka hayat dan skop mereka. SesiStorage direka untuk menjadi penyimpanan sementara untuk tempoh sesi penyemak imbas tunggal. Ia akan dibersihkan sebaik sahaja sesi berakhir, iaitu, apabila pengguna menutup tab atau tetingkap penyemak imbas. Sebaliknya, LocalStorage berterusan walaupun pelayar ditutup dan dibuka semula. Ia tidak mempunyai masa luput dan kekal sehingga ia dibersihkan secara manual oleh pengguna atau aplikasi web. Penyimpanan web adalah mudah. Anda boleh menggunakan kaedah setItem () untuk menyimpan data, getItem () kaedah untuk mendapatkan data, dan membuang () kaedah untuk memadam data. Sebagai contoh, untuk menyimpan item data di LocalStorage, anda boleh menggunakan localStorage.setItem ('kunci', 'nilai'). Untuk mengambil data ini, gunakan LocalStorage.GetItem ('Kunci'). Untuk memadam data, gunakan localStorage.removeItem ('kunci').

Adakah penyimpanan web HTML5 selamat? Ia tidak membenarkan penyimpanan maklumat pengguna sensitif seperti kata laluan atau nombor kad kredit. Walau bagaimanapun, ia terdedah kepada serangan skrip lintas tapak (XSS). Oleh itu, disarankan untuk tidak menyimpan maklumat sensitif dan sentiasa mengesahkan dan membersihkan data anda sebelum menyimpannya. antara pelayar yang berbeza. Walau bagaimanapun, kebanyakan pelayar moden menawarkan sekitar 5MB penyimpanan setiap domain untuk LocalStorage. SesiStorage juga menawarkan jumlah penyimpanan yang sama tetapi penting untuk diingat bahawa storan ini sementara. termasuk Chrome, Firefox, Safari, Opera, dan Internet Explorer 8 dan ke atas. Walau bagaimanapun, ia sentiasa menjadi amalan yang baik untuk memeriksa keserasian penyemak imbas sebelum menggunakannya.

Bagaimana saya boleh menyemak sama ada penyemak imbas menyokong penyimpanan web HTML5? Jika (typeof (penyimpanan)! == "undefined") {// code for localStorage/sessionStorage. } else {// Maaf! Tiada Sokongan Penyimpanan Web ..}

Bolehkah saya menyimpan objek atau tatasusunan dalam penyimpanan web HTML5? Walau bagaimanapun, kerana storan web hanya menyokong nilai rentetan, anda perlu menukar objek atau array anda ke dalam rentetan menggunakan json.stringify () sebelum menyimpannya. Untuk mengambilnya, anda boleh menukarnya kembali ke objek atau tatasusunan menggunakan json.parse ().

Bagaimana saya boleh membersihkan semua data dalam penyimpanan web HTML5? Penyimpanan Web menggunakan kaedah yang jelas (). Contohnya, untuk membersihkan semua data di localStorage, anda boleh menggunakan localStorage.clear (). Bolehkah saya menggunakan storan web html5 untuk aplikasi luar talian? aplikasi luar talian. Ia membolehkan anda menyimpan data pada penyemak imbas pengguna, yang kemudiannya boleh diakses dan digunakan walaupun pengguna di luar talian. Untuk penyimpanan web HTML5, termasuk cookies, indexeddb, dan web sql. Walau bagaimanapun, masing -masing mempunyai kelebihan dan kekurangannya sendiri, dan pilihannya bergantung kepada keperluan khusus aplikasi web anda.

Atas ialah kandungan terperinci Penyimpanan Web HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!