RAID HTML5: JavaScript API Extension 3 - Pengalaman Baru di Penyimpanan Lokal

Menyimpan data pada klien dapat menyelesaikan banyak masalah dan mengurangi transmisi data yang tidak perlu:

1. Dapat menyimpan status program: Pengguna dapat mengetahui di mana ia bekerja setelah menutup browser dan membukanya.

2. Can Cache Data: Tidak perlu mendapatkan banyak data yang tidak akan berubah dari server setiap saat.

3. Dapat menyimpan preferensi pengguna: Jenis data ini biasanya tidak perlu ada di server.

Sebelum penyimpanan lokal HTML5, jika kami ingin menyimpan data persisten pada klien, ada beberapa opsi:

1. Cookie http. Kerugian dari cookie HTTP jelas. Mereka hanya dapat menyimpan hingga 4KB data, dan setiap permintaan HTTP akan dikirim kembali ke server dan mengirimkan teks biasa (kecuali jika Anda menggunakan SSL).

2. IE UserData. UserData adalah solusi penyimpanan lokal yang diluncurkan oleh Microsoft selama Perang Browser pada 1990 -an. Ini menggunakan atribut perilaku DHTML untuk menyimpan data lokal, memungkinkan setiap halaman untuk menyimpan hingga 64K data dan hingga 640K data per situs. Kerugian UserData jelas. Itu bukan bagian dari standar web. Kecuali program Anda hanya perlu mendukung IE, pada dasarnya tidak berguna.

3. Cookie Flash. Cookie Flash sebenarnya tidak sama dengan cookie HTTP. Mungkin namanya harus flash penyimpanan lokal. Cookie Flash memungkinkan setiap situs untuk menyimpan data tidak lebih dari 100 ribu secara default. Jika melebihi, Flash akan secara otomatis meminta ruang penyimpanan yang lebih besar dari pengguna. Dengan antarmuka ExternalInterface Flash, Anda dapat dengan mudah mengoperasikan penyimpanan lokal Flash melalui JavaScript. Masalah dengan flash sangat sederhana, karena flash.

4. Google Gears. Gears adalah plug-in browser open source yang dirilis oleh Google pada tahun 2007, yang bertujuan untuk meningkatkan kompatibilitas browser utama. Gears memiliki database SQL tertanam bawaan berdasarkan SQLite dan menyediakan API terpadu untuk mengakses database. Setelah mendapatkan otorisasi pengguna, setiap situs dapat menyimpan data yang tidak terbatas dalam database SQL. Masalah Gears adalah Google itu sendiri tidak lagi menggunakannya.

Berbagai teknologi yang mempesona menyebabkan masalah kompatibilitas browser. Cookie yang paling umum di sini mungkin cookie.

Menanggapi masalah di atas, HTML5 memberikan solusi yang lebih ideal: Jika Anda perlu menyimpan data yang dapat diselesaikan hanya dengan menggunakan pasangan kunci/nilai, Anda dapat menggunakan penyimpanan web.

Dibandingkan dengan cookie, penyimpanan web memiliki banyak keunggulan, dirangkum sebagai berikut:

1. Ruang penyimpanan yang lebih besar: Setiap ruang penyimpanan independen di bawah IE8 adalah 10m, dan browser lainnya memiliki implementasi yang sedikit berbeda, tetapi mereka jauh lebih besar dari cookie.

2. Konten yang disimpan tidak akan dikirim ke server: Ketika cookie diatur, konten cookie akan dikirim bersama dengan permintaan di server, yang merupakan pemborosan bandwidth untuk data yang disimpan secara lokal. Data dalam penyimpanan web hanya ada secara lokal dan tidak akan berinteraksi dengan server.

3. Antarmuka yang lebih kaya dan mudah digunakan: Penyimpanan Web menyediakan serangkaian antarmuka yang lebih kaya, membuat operasi data lebih mudah.

4. Ruang penyimpanan independen: Setiap domain (termasuk subdomain) memiliki ruang penyimpanan independen, dan setiap ruang penyimpanan sepenuhnya independen, sehingga tidak akan menyebabkan kebingungan data.

Penyimpanan Web sebenarnya terdiri dari dua bagian: Sesiesstorage dan LocalStorage.

SessionStorage digunakan untuk menyimpan data dalam sesi secara lokal, yang hanya dapat diakses pada halaman dalam sesi yang sama dan data akan dihancurkan setelah sesi selesai. Oleh karena itu, Sesi Sesi bukanlah penyimpanan lokal yang persisten, tetapi hanya penyimpanan tingkat sesi.

LocalStorage digunakan untuk penyimpanan lokal yang persisten, dan data tidak akan pernah kedaluwarsa kecuali dihapus secara aktif.

Penyimpanan Web didukung di browser utama utama, tetapi agar dapat kompatibel dengan browser lama, kita masih perlu memeriksa apakah teknologi ini dapat digunakan.

Metode pertama: periksa apakah browser mendukung penyimpanan web dengan memeriksa apakah objek penyimpanan ada:

if (typeof (penyimpanan)! == "tidak terdefinisi") {

// Ya! Dukungan LocalStorage dan SessionStorage!

// Beberapa kode ...

} kalau tidak {

// Maaf! Tidak ada dukungan penyimpanan web ..

}

Cara kedua adalah dengan memeriksa objek masing -masing secara terpisah, seperti memeriksa apakah LocalStorage mendukungnya:

if (typeof (localstorage) == 'tidak terdefinisi') {

Peringatan ('Browser Anda tidak mendukung HTML5 LocalStorage. Coba upgrade.');

} kalau tidak {

// Ya! Dukungan LocalStorage dan SessionStorage!

// Beberapa kode ...

}

atau:

if ('localstorage' di window && window ['localstorage']! == null) {

// Ya! Dukungan LocalStorage dan SessionStorage!

// Beberapa kode ...

} kalau tidak {

Peringatan ('Browser Anda tidak mendukung HTML5 LocalStorage. Coba upgrade.');

}

atau

if (!! localstorage) {

// Ya! Dukungan LocalStorage dan SessionStorage!

// Beberapa kode ...

} kalau tidak {

Peringatan ('Browser Anda tidak mendukung HTML5 LocalStorage. Coba upgrade.');

}

Jelas, metode pertama adalah yang paling langsung dan paling sederhana.

Penyimpanan Web Menyimpan pasangan nilai kunci, dan browser menyimpannya sebagai string. Ingatlah untuk mengubahnya ke format lain bila perlu.

Kecuali untuk berbagai penggunaan Sesi Sesi dan LocalStorage, daftar anggota sama:

Key = Nilai: Simpan Pasangan Nilai Kunci

setItem (kunci, nilai): Simpan pasangan nilai kunci

getItem (kunci): Dapatkan pasangan nilai kunci

lepas (kunci): Lepaskan semua pasangan nilai kunci

clear (): Hapus semua pasangan nilai kunci

Panjang: Jumlah pasangan nilai kunci

Di sini kita masih perlu menekankan: Jenis nilai dalam metode setItem (kunci, nilai) secara teoritis dapat menjadi jenis apa pun, tetapi pada kenyataannya browser akan memanggil metode ToString nilai untuk mendapatkan nilai string dan menyimpannya secara lokal. Oleh karena itu, jika itu adalah tipe khusus, Anda perlu mendefinisikan metode tostring yang bermakna sendiri. Misalnya, contoh berikut digunakan bersama dengan json.stringify:

var person = {'name': 'Rainman', 'Age': 24};

localstorage.setitem ("Me", json.stringify (orang));

Json.parse (localstorage.getItem ('me')). Name; // 'Rainman'

/**

* Json.stringify, konversi data json menjadi string

* Json.stringify ({'name': 'Fred', 'Age': 24}); // '{"name": "fred", "usia": 24}'

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

* Json.parse, anti-pemecahan json.stringify

* Json.parse ('["a", "b", "c"]') // ["a", "b", "c"]

*/

Selain itu, saat menambahkan pasangan nilai kunci, jika jumlah yang ditambahkan besar, lebih aman untuk memeriksa apakah ada pengecualian yang melebihi batas:

mencoba {

localstorage.setitem (itemId, values.join (';'));

} catch (e) {

if (e == quta_exceeded_err) {

waspada ('kuota terlampaui!');

}

}

Metode penyimpanan web sangat sederhana. Contoh berikut adalah menghitung jumlah klik pada tombol:

<! Doctype html>

<Html>

<head>

<script>

fungsi clickcounter ()

{

if (typeof (penyimpanan)! == "tidak ditentukan")

{

if (localstorage.clickcount)

{

localstorage.clickcount = angka (localstorage.clickcount) +1;

}

kalau tidak

{

localstorage.clickcount = 1;

}

document.geteLementById ("result"). innerHtml = "Anda telah mengklik tombol" + localstorage.clickcount + "waktu (s).";

}

kalau tidak

{

document.geteLementById ("hasil"). bitnertml = "Maaf, browser Anda tidak mendukung penyimpanan web ...";

}

}

</script>

</head>

<body>

<p> <tombol ontClick = "clickCounter ()" type = "Tombol"> klik saya! </aton> </p>

<Div id = "result"> </div>

<p> Klik tombol untuk melihat peningkatan penghitung. </p>

<p> Tutup tab browser (atau jendela), dan coba lagi, dan penghitung akan terus menghitung (tidak diatur ulang). </p>

</body>

</html>

Dalam contoh di atas, Anda dapat mengubah LocalStorage ke sessionStorage, klik tombol beberapa kali dan verifikasi efeknya sebelum dan sesudah menutup browser.

Cacat penyimpanan web terutama terkonsentrasi dalam keamanannya, yang tercermin dalam dua poin berikut:

1. Browser akan mengalokasikan ruang penyimpanan independen untuk setiap domain, yaitu skrip tidak dapat mengakses ruang penyimpanan di domain B di domain A, tetapi browser tidak akan memeriksa apakah domain di mana skrip berada sama dengan domain saat ini. Artinya, skrip yang tertanam dalam domain A di domain B masih dapat mengakses data di domain B.

2. Data yang disimpan secara lokal tidak dienkripsi dan tidak akan pernah kedaluwarsa, yang sangat mudah menyebabkan kebocoran privasi.

Selain itu, untuk masalah yang lebih terkait dengan keamanan, silakan merujuk ke tautan dalam referensi praktis nanti.

Dalam proposal HTML5 lama, jika Anda perlu menyimpan data yang kompleks, Anda dapat menggunakan database web, yang dapat menggunakan SQL seperti program klien (standar database Web telah ditinggalkan, jadi di sini disebutkan secara singkat);

Ini juga diusulkan dalam HTML5. Setelah browser ditutup, informasi yang disimpan menggunakan GlobalStorage masih dapat dipertahankan. Seperti LocalStorage, informasi yang disimpan di halaman mana pun di domain dapat dibagikan oleh semua halaman, tetapi saat ini hanya Firefox yang mendukungnya.

Sintaks Dasar:

• GlobalStorage ['developer.mozilla.org'] - Semua subdomain di bawah pengembang.mozilla.org dapat dibaca dan ditulis melalui objek penyimpanan namespace ini.

• GlobalStorage ['mozilla.org'] - Semua halaman web di bawah nama domain mozilla.org dapat dibaca dan ditulis melalui objek penyimpanan namespace ini.

• GlobalStorage ['org'] - Semua halaman web di bawah nama domain .org dapat dibaca dan ditulis melalui objek penyimpanan namespace ini.

• GlobalStorage [''] - Halaman web apa pun dengan nama domain apa pun dapat dibaca dan ditulis melalui objek penyimpanan namespace ini.

Metode Properties:

• setItem (tombol, nilai) - Atur atau setel ulang nilai kunci.

• getItem (kunci) - Mendapatkan nilai kunci.

• lepas (tombol) - Menghapus nilai kunci.

• Atur nilai kunci: window.globalstorage [planabc.net] .key = nilai;

• Dapatkan nilai kunci: value = window.globalstorage [planabc.net] .key;

Fitur Lainnya:

• Waktu kedaluwarsa sama dengan LocalStorage, dan beberapa fitur lainnya juga mirip dengan LocalStorage.

• Firefox sekarang hanya mendukung penyimpanan GlobalStorage di bawah domain saat ini. Menggunakan domain umum akan menyebabkan kode kesalahan keamanan kesalahan yang serupa: 1000.

Akhirnya, kami ingin memperkenalkan IndexedDB. Dibandingkan dengan dua spesifikasi lainnya, hanya Firefox yang saat ini mengimplementasikan IndexedDB (omong -omong, Mozilla mengatakan mereka tidak akan pernah menerapkan database Web SQL), tetapi Google mengatakan sedang mempertimbangkan menambahkan dukungan IndexDB ke Chrome.

IndexedDB memperkenalkan konsep toko objek, yang sedikit seperti database SQL di mana Anda dapat menyimpan catatan dalam database, dan setiap catatan dapat memiliki banyak bidang, masing-masing bidang memiliki tipe data tertentu, Anda dapat memilih subset catatan dan melintasi dengan kursor, sementara semua perubahan di toko objek berbasis transaksi.

Untuk informasi lebih lanjut, silakan merujuk ke dokumentasi tentang IndexedDB di Firefox dalam referensi penggunaan nanti.

Dokumen Resmi: http://www.w3schools.com/html5/

Template Kekhawatiran: http://www.cuoxin.com/w3school/html5/

Keamanan Penyimpanan Lokal: http://www.mhtml5.com/2012/03/4586.html

Fitur Eksperimental Firefox IndexedDB: https://developer.mozilla.org/en-us/docs/indexeddb