Ringkasan penggunaan Penyimpanan lokal dan Penyimpanan sesi

Dalam HTML5, fitur Penyimpanan lokal baru ditambahkan. Fitur ini terutama digunakan sebagai penyimpanan lokal untuk mengatasi masalah kurangnya ruang penyimpanan cookie (ruang penyimpanan setiap cookie dalam cookie adalah 4k. Browser umum di Penyimpanan lokal Ukuran yang didukung adalah 5M .Penyimpanan lokal ini akan berbeda di browser yang berbeda.

1. Penyimpanan lokal memperluas batas 4K cookie

2. LocalStorage dapat langsung menyimpan data yang diminta pertama secara lokal. Ini setara dengan database 5M untuk halaman front-end. Dibandingkan dengan cookie, ini dapat menghemat bandwidth, tetapi ini hanya tersedia di browser kelas atas

1. Ukuran browser tidak seragam, dan atribut localStorage hanya didukung di versi IE di atas IE8.

2. Saat ini, semua browser membatasi tipe nilai localStorage ke tipe string. Hal ini memerlukan beberapa konversi untuk tipe objek JSON umum kita sehari-hari.

3. Penyimpanan lokal tidak dapat dibaca dalam mode privasi browser.

4. LocalStorage pada dasarnya membaca string. Jika Anda menyimpan banyak konten, ini akan menghabiskan ruang memori dan menyebabkan halaman macet.

5. Penyimpanan lokal tidak dapat dirayapi oleh crawler

Satu-satunya perbedaan antara localStorage dan sessionStorage adalah bahwa localStorage milik penyimpanan permanen, sedangkan sessionStorage milik sessionStorage. Ketika sesi berakhir, pasangan nilai kunci di sessionStorage akan dihapus.

Di sini kami menggunakan Penyimpanan lokal untuk menganalisis

Dukungan browser untuk Penyimpanan lokal:

Pernyataan khusus disini adalah jika menggunakan browser IE maka UserData akan digunakan sebagai tempat penyimpanan. Penjelasan utama disini adalah isi dari localStorage, jadi userData tidak akan dijelaskan terlalu banyak, dan menurut blogger pribadi tidak ada. Penting untuk mempelajari penggunaan UserData, karena IE6/IE7 saat ini sedang dalam tahap eliminasi, dan banyak pengembangan halaman saat ini melibatkan teknologi baru seperti HTML5/CSS3, jadi biasanya kami tidak menggunakannya untuk kompatibilitas

Pertama, saat menggunakan localStorage, kita perlu menentukan apakah browser mendukung atribut localStorage.

 if(!window.localStorage){ alert(browser mendukung penyimpanan lokal); return false; }else{ //Bisnis logika utama}

Ada tiga metode untuk menulis ke localStorage. Di sini kami akan memperkenalkannya satu per satu.

 if(!window.localStorage){ alert(browser mendukung penyimpanan lokal); return false; }else{ var storage=window.localStorage; //Tulis bidang penyimpanan[a]=1; ; //Tulis kolom c penyimpanan.setItem(c,3); konsol.log(tipe penyimpanan[a]); penyimpanan[c]); }

Hasil setelah dijalankan adalah sebagai berikut:

Perlu dicatat di sini bahwa penggunaan Penyimpanan lokal juga mengikuti kebijakan asal yang sama, sehingga situs web yang berbeda tidak dapat langsung berbagi Penyimpanan lokal yang sama.

Hasil akhir yang tercetak di konsol adalah:

Saya tidak tahu apakah ada pembaca yang memperhatikan bahwa yang baru saja disimpan bertipe int, tetapi dicetak sebagai tipe string. Hal ini terkait dengan karakteristik localStorage itu sendiri.

Membaca Penyimpanan lokal

 if(!window.localStorage){ alert(browser mendukung penyimpanan lokal); }else{ var storage=window.localStorage; //Tulis kolom penyimpanan[a]=1; Tulis bidang c penyimpanan.setItem(c,3); konsol.log(tipe penyimpanan[a]); konsol.log(tipe penyimpanan[b]); penyimpanan[c]); //Metode pertama berbunyi var a=storage.a; console.log(a); //Metode kedua membaca var b=storage[b]; metode ketiga berbunyi var c=storage.getItem(c); console.log(c);

Ada tiga cara untuk membaca localStorage. Metode yang direkomendasikan secara resmi adalah getItem/setItem untuk mengaksesnya.

Saya telah mengatakan sebelumnya bahwa localStorage setara dengan database front-end, database terutama terdiri dari empat langkah: penambahan, penghapusan, dan kueri.

Sekarang mari kita bicara tentang dua langkah menghapus dan memodifikasi Penyimpanan lokal.

Mengubah langkah ini lebih mudah dipahami. Idenya sama dengan mengubah nilai variabel global.

 if(!window.localStorage){ alert(browser mendukung penyimpanan lokal); }else{ var storage=window.localStorage; //Tulis kolom penyimpanan[a]=1; Tulis kolom c penyimpanan.setItem(c,3); konsol.log(penyimpanan.a); // konsol.log(tipe penyimpanan[a]); penyimpanan[b]); // konsol.log(jenis penyimpanan[c]); /*Garis pemisah*/ penyimpanan.a=4; konsol.log(penyimpanan.a);

Di konsol, kita dapat melihat bahwa kunci a telah diubah menjadi 4.

Penghapusan Penyimpanan lokal

1. Hapus semua konten Penyimpanan lokal

 var penyimpanan=window.localStorage; penyimpanan.a=1; penyimpanan.setItem(c,3); konsol.log(penyimpanan.clear();

2. Hapus pasangan nilai kunci di Penyimpanan lokal

 var penyimpanan=window.localStorage; penyimpanan.a=1; penyimpanan.setItem(c,3); konsol.log(penyimpanan); penyimpanan.removeItem(a);

Lihat hasilnya di konsol

akuisisi kunci Penyimpanan lokal

 var penyimpanan=window.localStorage; penyimpanan.a=1; penyimpanan.setItem(c,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); catatan(kunci); }

Gunakan metode key() untuk mendapatkan kunci yang sesuai dengan masuk dan keluar dari indeks.

4. Pertimbangan lain untuk Penyimpanan lokal

Umumnya kita akan menyimpan JSON di localStorage, namun localStorage akan secara otomatis mengubah localStorage menjadi bentuk string.

Saat ini kita bisa menggunakan metode JSON.stringify() untuk mengubah JSON menjadi string JSON

Contoh:

 if(!window.localStorage){ alert(browser mendukung penyimpanan lokal); }else{ var penyimpanan=window.localStorage; var data={ nama:'xiecanyong', jenis kelamin:'pria', hobi:'program' }; =JSON.stringify(data); penyimpanan.setItem(data,d);

Setelah membaca, untuk mengubah string JSON menjadi objek JSON, gunakan metode JSON.parse()

 var penyimpanan=jendela.penyimpanan lokal; var data={ nama:'xiecanyong', jenis kelamin:'pria', hobi:'program' }; var d=JSON.stringify(penyimpanan data.setItem(data,d); /Ubah string JSON menjadi keluaran objek JSON var json=storage.getItem(data); var jsonObj=JSON.parse(json console.log(typeof jsonObj);

Yang dicetak adalah objek Objek

Hal lain yang perlu diperhatikan adalah tipe lain harus dikonversi ketika dibaca.