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

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

WBOY

Lepaskan： 2016-05-16 15:50:01

asal

1390 orang telah melayarinya

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>