Tutorial tentang penggunaan LocalStorage di HTML5

Artikel ini terutama memperkenalkan tutorial tentang penggunaan LocalStorage di HTML5. LocalStorage digunakan untuk interaksi keluar lokal antara browser dan sistem. Teman yang membutuhkannya dapat merujuk pada apa itu stochstorage

Beberapa hari yang lalu, saya menemukan bahwa ada operasi cookie yang aneh dalam proyek lama. Setelah berkonsultasi, saya ingin menyimpan beberapa informasi untuk menghindari parameter lulus pada URL, tetapi saya tidak mempertimbangkan masalah apa yang akan terjadi cookie:

① Ukuran cookie terbatas sekitar 4K, yang tidak cocok untuk menyimpan data bisnis.

② Cookie dikirim dengan transaksi HTTP setiap kali, membuang -buang bandwidth

Kami sedang melakukan proyek seluler, jadi teknologi nyata yang cocok untuk digunakan di sini adalah LocalStorage. LocalStorage dapat dikatakan sebagai optimalisasi cookie. Menggunakannya dapat memfasilitasi menyimpan data di sisi klien dan tidak akan dikirimkan dengan HTTP, tetapi bukan tanpa masalah:

① Ukuran LocalStorage terbatas pada sekitar 5 juta karakter, dan setiap browser tidak konsisten

② LocalStorage tidak dapat dibaca dalam mode privasi

③ LocalStorage pada dasarnya adalah membaca dan menulis file. Jika ada terlalu banyak data, itu akan lebih macet (Firefox akan mengimpor data ke dalam memori sekaligus, dan akan menakutkan jika Anda memikirkannya)

④ LocalStorage tidak dapat dirangkak oleh crawler, jangan gunakan itu untuk sepenuhnya menggantikan parameter URL

Kelemahan tidak menyembunyikan kelebihannya, dan semua masalah di atas dapat dihindari, jadi fokus kita harus pada cara menggunakan stor localstorage dan bagaimana menggunakannya dengan benar.

Penggunaan LocalStorage

Ada dua jenis objek penyimpanan LocalStorage:

① Sessionstrage: Sesi berarti sesi. Di sini sesi mengacu pada periode validitas objek sesi hanya lama ketika pengguna menelusuri situs web tertentu.

② LocalStorage: Simpan data pada perangkat perangkat keras klien, tidak peduli apa itu, itu berarti bahwa data masih ada di sana lain kali Anda membuka komputer.

Perbedaan antara keduanya adalah bahwa satu adalah pelestarian sementara dan yang lainnya adalah pelestarian jangka panjang.

Berikut adalah kode sederhana untuk menggambarkan penggunaan dasarnya: