Latest web development tutorials

Penyimpanan Web HTML5

HTML5 penyimpanan web, lebih baik dari penyimpanan lokal kue.

Apa HTML5 penyimpanan Web?

Gunakan HTML5 dapat menelusuri data yang disimpan secara lokal pada pengguna.

Sebelumnya, penyimpanan lokal menggunakan cookies. Tapi keamanan Web dan penyimpanan membutuhkan lebih cepat. Data ini tidak akan disimpan di server, namun data hanya untuk data yang diminta oleh pengguna pada situs. Hal ini juga dapat menyimpan data dalam jumlah besar tanpa mempengaruhi kinerja situs.

Data sebagai pasangan kunci / nilai ada, halaman web data hanya diperbolehkan untuk menggunakan akses web.

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8 +, Firefox, Opera, Chrome, dan dukungan Safari Web Store.

Catatan: Internet Explorer 7 dan versi sebelumnya dari IE tidak mendukung toko web.

localStorage dan sessionStorage

Dua benda yang tersimpan dalam data klien:

  • localStorage - tidak ada waktu penyimpanan batas data
  • sessionStorage - Penyimpanan Data untuk sesi

Sebelum menggunakan penyimpanan web, memeriksa dukungan browser dan localStorage sessionStorage:

if (typeof (Storage)! == "undefined") { // Ya! Dukungan localStorage sessionStorage benda! // Beberapa kode ..... } lain { // Maaf! Tidak mendukung toko web. }

localStorage Object

Tidak ada waktu objek penyimpanan data batas localStorage. Keesokan harinya, setelah minggu kedua, atau tahun depan, data masih tersedia.

contoh

. LocalStorage lastname = "Smith"; mendokumentasikan getElementById ( "hasil") innerHTML = "Nama belakang:" ... + localStorage nama belakang;

Coba »

contoh analisis:

  • Gunakan tombol = "nama belakang" dan value = "Smith" Buat key localStorage / pasangan nilai
  • kunci Retrieval untuk nilai "nama belakang" dan kemudian memasukkan id = "hasil" elemen dalam

Tip: Key / nilai pasangan biasanya disimpan sebagai string, Anda dapat sesuai dengan kebutuhan mereka untuk mengkonversi format.

Contoh berikut menunjukkan jumlah kali pengguna mengklik tombol untuk mengkonversi nilai string ke tipe kode digital:

contoh

jika (LocalStorage. Clickcount) { . LocalStorage clickcount = Jumlah (localStorage clickcount .) + 1;} lain { . LocalStorage clickcount = 1;} .. Dokumen getElementById ( "hasil" ) innerHTML = " Anda telah mengklik tombol" + localStorage clickcount + "kali.";

Coba »

benda sessionStorage

Metode sessionStorage untuk sesi untuk penyimpanan data. Ketika pengguna menutup jendela browser, data akan dihapus.

Cara membuat dan mengakses sessionStorage sebuah ::

contoh

jika (SessionStorage. Clickcount) { . SessionStorage clickcount = Jumlah (sessionStorage clickcount .) + 1;} lain { . SessionStorage clickcount = 1;} .. Dokumen getElementById ( "hasil" ) innerHTML = " Dalam percakapan ini yang telah Anda mengklik tombol" + sessionStorage clickcount + "kali.";

Coba »