Serbuan pada Sambungan API Javascript HTML5 3—pengalaman baharu kemahiran tutorial storage_html5 setempat

Mengapa kita perlu menyimpan data kepada pelanggan?
Menyimpan data pada klien boleh menyelesaikan banyak masalah dan mengurangkan penghantaran data yang tidak perlu:
1 Boleh menyimpan status program: pengguna boleh mengetahui di mana dia telah bekerja selepas menutup pelayar dan membuka ia sekali lagi.
2. Keupayaan untuk cache data: Tidak perlu mendapatkan data dari pelayan setiap kali untuk banyak data yang tidak berubah.
3. Boleh menyimpan pilihan pengguna: Data jenis ini biasanya tidak perlu disimpan pada pelayan.
Pendekatan sebelumnya
Sebelum storan setempat HTML5, jika kami ingin menyimpan data berterusan pada klien, kami mempunyai beberapa pilihan:
1. Kelemahan kuki HTTP adalah jelas, ia hanya boleh menyimpan sehingga 4KB data, dan setiap permintaan HTTP akan dihantar kembali ke pelayan dalam teks yang jelas (melainkan anda menggunakan SSL).
2. IE userData. userData ialah penyelesaian storan tempatan yang dilancarkan oleh Microsoft semasa perang pelayar pada tahun 1990-an Ia menggunakan atribut tingkah laku DHTML untuk menyimpan data tempatan kelemahan userData adalah jelas Ia bukan sebahagian daripada standard web, jadi melainkan aplikasi anda hanya perlu menyokong IE, ia tidak berguna.
3. Kuki Flash sebenarnya bukan perkara yang sama dengan kuki HTTP Mungkin namanya harus dipanggil "Kuki Flash setempat". daripada pengguna. Ruang storan yang besar, dengan bantuan antara muka ExternalInterface Flash, anda boleh mengendalikan storan setempat Flash melalui Javascript dengan mudah. Masalah dengan Flash ialah ia adalah Flash.
4. Gears ialah pemalam penyemak imbas sumber terbuka yang dikeluarkan oleh Google pada tahun 2007, bertujuan untuk meningkatkan keserasian pelayar utama Gears mempunyai pangkalan data SQL terbenam terbina dalam berdasarkan SQLite dan menyediakan API bersatu untuk mengakses pangkalan data Selepas mendapatkan pengguna kebenaran, setiap tapak boleh menyimpan data dalam mana-mana saiz dalam pangkalan data SQL Masalah dengan Gears ialah Google sendiri tidak lagi menggunakannya.
Pelbagai teknologi yang mempesonakan membawa kepada isu keserasian penyemak imbas. Mungkin perkara yang paling ramai orang gunakan di sini ialah kuki.
Pengalaman baharu dalam HTML5
Sebagai tindak balas kepada masalah di atas, HTML5 menyediakan penyelesaian yang lebih ideal: jika apa yang anda perlu simpan hanyalah pasangan kunci/nilai, ia boleh diselesaikan data, anda boleh menggunakan Storan Web.
Berbanding dengan Kuki, Storan Web mempunyai banyak kelebihan, yang boleh diringkaskan seperti berikut:
1 Ruang storan yang lebih besar: Setiap ruang storan bebas di bawah IE8 ialah 10M, dan pelayar lain mempunyai pelaksanaan yang berbeza sedikit, tetapi jauh lebih besar. daripada Cookie.
2. Kandungan yang disimpan tidak akan dihantar ke pelayan: Apabila kuki ditetapkan, kandungan kuki akan dihantar ke pelayan bersama-sama dengan permintaan, yang merupakan pembaziran lebar jalur untuk data yang disimpan secara tempatan. Data dalam Storan Web hanya wujud secara setempat dan tidak berinteraksi dengan pelayan dalam apa jua cara.
3. Antara muka yang lebih kaya dan mudah digunakan: Storan Web menyediakan set antara muka yang lebih kaya, menjadikan operasi data lebih mudah.
4. Ruang storan bebas: Setiap domain (termasuk subdomain) mempunyai ruang storan bebas Setiap ruang storan adalah bebas sepenuhnya, jadi tidak akan berlaku kekeliruan data.
Klasifikasi Storan Web
Storan Web sebenarnya terdiri daripada dua bahagian: sessionStorage dan localStorage.
sessionStorage digunakan untuk menyimpan data secara setempat dalam sesi Data ini hanya boleh diakses oleh halaman dalam sesi yang sama dan data akan dimusnahkan apabila sesi tamat. Oleh itu sessionStorage bukanlah storan tempatan yang berterusan, hanya storan peringkat sesi.
LocalStorage digunakan untuk storan setempat yang berterusan Melainkan data dipadamkan secara aktif, data tidak akan luput.
Semak sama ada Storan Web disokong
Storan Web disokong dalam semua penyemak imbas utama, tetapi untuk serasi dengan penyemak imbas lama, anda masih perlu menyemak sama ada teknologi ini boleh digunakan.
Cara pertama: Semak sama ada penyemak imbas menyokong Storan Web dengan menyemak sama ada objek Storan wujud:

Salin kod

Kodnya adalah seperti berikut:

if(typeof(Storage)!=="undefined"){
// Ya! ..
} lain {
// Maaf tiada sokongan storan web..
}

Cara kedua ialah menyemak objek masing-masing secara berasingan, contohnya, semak sama ada localStorage menyokong :

Salin kodKod adalah seperti berikut:

jika (typeof(localStorage) == 'undefined' ) {
alert('Pelayar anda tidak menyokong HTML5 localStorage. Cuba tingkatkan.'
} lain {
// Ya! localStorage dan sessionStorage sokongan {
// Ya! localStorage dan sessionStorage menyokong
// Beberapa kod.....
} lain {
alert('Pelayar anda tidak menyokong HTML5 localStorage. Cuba tingkatkan.') ;
}
atau
jika (!!localStorage) {
// Ya! 🎜>alert('Penyemak imbas anda tidak menyokong HTML5 localStorage. Cuba tingkatkan.');
}


Jelas sekali cara pertama adalah yang paling langsung dan paling mudah.

Penggunaan Storan Web

Storan Web menyimpan pasangan nilai kunci dan penyemak imbas menyimpannya sebagai rentetan. Ingat untuk menukarnya kepada format lain jika perlu.
Kecuali untuk kegunaan yang berbeza, sessionStorage dan localStorage mempunyai senarai ahli yang sama:

Salin kod


Kod adalah seperti berikut:

kunci = nilai: simpan pasangan nilai kuncisetItem(kunci, nilai): simpan pasangan nilai kuncigetItem(kunci): dapatkan pasangan nilai kunciremoveItem(key ): Alih keluar semua pasangan nilai kunci

clear(): Kosongkan semua pasangan nilai kunci

panjang: Bilangan pasangan nilai kunci

Perlu dititikberatkan di sini: kaedah setItem(key,value ) boleh menjadi apa-apa jenis dalam teori, tetapi sebenarnya penyemak imbas akan memanggil kaedah nilai toString untuk mendapatkan nilai rentetannya dan menyimpannya secara setempat, jadi jika ia adalah jenis tersuai, anda perlu menentukan kaedah yang bermakna sendiri kepadaString. Sebagai contoh, contoh berikut digunakan dalam kombinasi dengan JSON.stringify:

Salin kod


Kod adalah seperti berikut :

var person = {'name': 'rainman', 'age': 24}; localStorage.setItem("me", JSON.stringify(person)); >JSON.parse(localStorage.getItem( 'me')).name; // 'rainman' /*** JSON.stringify, tukar data JSON ke dalam rentetan

* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred ", "umur":24}'

* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'

* JSON.parse, reverse JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c" ]
*/


Selain itu, apabila menambah nilai kunci berpasangan, jika nombor yang ditambah agak besar, bandingkan Cara selamat adalah untuk menyemak sama ada terdapat pengecualian yang melebihi had:





Salin kod

Kodnya adalah seperti berikut:

cuba { localStorage.setItem(itemId, values.join(';')); { jika (e == QUOTA_EXCEEDED_ERR) { makluman( 'Kuota melebihi!'); }

}

Kaedah Storan Web adalah sangat mudah contoh mengira bilangan klik butang:





Salin kod

Kodnya adalah seperti berikut:

=="undefined") { jika (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount) 1;

localStorage.clickcount=1;

}

document.getElementById ("result").innerHTML="Anda telah mengklik butang " localStorage.clickcount " time(s)."
}
lain
{
document.getElementById("hasil"). skrip>

Klik saya! ;/p>

< /div>

Tutup tab penyemak imbas (atau tetingkap), dan cuba lagi, dan pembilang akan terus mengira (tidak ditetapkan semula).

Dalam contoh di atas, anda boleh menggantikan localStorage dengan sessionStorage, klik butang beberapa kali dan sahkan kesan sebelum dan selepas menutup penyemak imbas.
Masalah Sedia Ada
Kepincangan Storan Web terutamanya tertumpu pada keselamatannya, yang secara khusus ditunjukkan dalam dua perkara berikut:
1. Penyemak imbas akan memperuntukkan storan bebas untuk setiap domain ruang, iaitu skrip dalam domain A tidak boleh mengakses ruang storan dalam domain B, tetapi penyemak imbas tidak akan menyemak sama ada domain tempat skrip itu berada adalah sama dengan domain semasa. Iaitu, skrip yang dibenamkan dalam domain A dalam domain B masih boleh mengakses data dalam domain B.
2. Data yang disimpan secara setempat tidak disulitkan dan tidak akan luput, yang boleh menyebabkan kebocoran privasi dengan mudah.
Selain itu, untuk lebih banyak isu berkaitan keselamatan, sila rujuk pautan dalam rujukan praktikal di bawah.
Senarai spesifikasi lain (untuk maklumat sahaja, mungkin ia akan hilang apabila)
Pangkalan Data Web
Dalam cadangan HTML5 lama, anda boleh menggunakannya jika anda perlu menyimpan data yang kompleks Pangkalan Data Web boleh menggunakan SQL seperti program klien (standard Pangkalan Data Web telah ditinggalkan, jadi saya akan menyebutnya secara ringkas di sini); pelayar Pada masa hadapan, maklumat yang disimpan menggunakan globalStorage masih boleh dikekalkan Seperti localStorage, maklumat yang disimpan dalam mana-mana halaman dalam domain boleh dikongsi oleh semua halaman, tetapi pada masa ini hanya FireFox yang menyokongnya.
Sintaks asas: • GlobalStorage['developer.mozilla.org'] - Semua subdomain di bawah developer.mozilla.org boleh membaca dan menulis melalui objek storan ruang nama ini. • globalStorage['mozilla.org'] - Semua halaman web di bawah nama domain mozilla.org boleh dibaca dan ditulis melalui objek storan ruang nama ini.
• globalStorage['org'] - Semua halaman web di bawah nama domain .org boleh dibaca dan ditulis melalui objek storan ruang nama ini.
• GlobalStorage[''] - Mana-mana halaman web di bawah mana-mana nama domain boleh membaca dan menulis melalui objek storan ruang nama ini
Atribut kaedah:
• setItem(kunci, nilai) - Tetapkan Atau tetapkan semula nilai kunci.
• getItem(key) – Dapatkan nilai kunci.
• removeItem(key) – Keluarkan nilai kunci.
• Tetapkan nilai kunci: window.globalStorage["planabc.net"].kunci = nilai;
• Dapatkan nilai kunci: nilai = window.globalStorage["planabc.net"].kunci; Ciri:
• Masa tamat tempoh adalah sama seperti localStorage, dan beberapa ciri lain juga serupa dengan localStorage.
• Pada masa ini, Firefox hanya menyokong storan GlobalStorage di bawah domain semasa Jika anda menggunakan domain awam, ia akan menyebabkan ralat yang serupa dengan kod "Ralat keselamatan": "1000".

IndexedDB

Perkara terakhir yang ingin kami perkenalkan ialah IndexedDB Berbanding dengan dua spesifikasi yang lain, hanya Firefox yang melaksanakan IndexedDB (secara langsung, Mozilla berkata mereka tidak akan melaksanakan Pangkalan Data Web SQL). , tetapi Google telah menyatakan bahawa ia sedang mempertimbangkan untuk menambah sokongan IndexDB pada Chrome.
IndexedDB memperkenalkan konsep stor objek, yang sedikit seperti Pangkalan Data SQL Anda boleh menyimpan "rekod" dalam "pangkalan data", dan setiap "rekod" boleh mempunyai banyak "medan", setiap medan mempunyai Untuk a. jenis data tertentu, anda boleh memilih subset rekod dan melintasinya menggunakan "kursor", dan semua perubahan dalam stor objek adalah berdasarkan "urus niaga".
Untuk mendapatkan maklumat lanjut, lihat dokumentasi pada IndexedDB dalam FireFox dalam rujukan penggunaan kemudian. Rujukan praktikal:

Dokumentasi rasmi:
http://www.w3schools.com/html5/
Rumah Skrip: http:// www .jb51.net/w3school/html5/
Keselamatan storan setempat:http://www.mhtml5.com/2012/03/4586.html
Ciri Eksperimen FireFox IndexedDB: https://developer.mozilla.org/en-US/docs/IndexedDB

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn