Bercakap tentang kemahiran tutorial teknologi storan tempatan HTML5_html5

Caching tempatan ialah teknologi baharu yang muncul dalam HTML5 Kemunculan teknologi ini membolehkan pembangunan web mudah alih. Kita semua tahu bahawa apabila ia datang untuk membina aplikasi mudah alih berprestasi tinggi, kelajuan adalah kunci. Sebelum HTML5, hanya kuki boleh menyimpan data dan saiznya hanya 4kb. Ini mengehadkan penyimpanan fail aplikasi dengan teruk, menyebabkan masa pemuatan yang lama untuk aplikasi mudah alih yang dibangunkan web. Dengan storan tempatan, aplikasi mudah alih web boleh menjadi lebih dekat dengan asli.

Dalam penyemak imbas, storan tempatan dipanggil melalui window.localStorage. Kod untuk menentukan sama ada penyemak imbas menyokong storan tempatan adalah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan

1. if(window.localStorage){
2. makluman('Pelayar ini menyokong Storan tempatan');
}lain{
makluman('Pelayar ini TIDAK menyokongLocalStorage');
4. } 
Jika kita ingin menyimpan data secara setempat, cara paling mudah ialah dengan tetingkap. Tambahkan harta pada localStorage dan tetapkan nilai padanya. Contohnya, jika kita ingin menyimpan nama data yang nilainya ialah Tom, kita boleh mencapainya dengan cara berikut:

Kod XML/HTML

Salin kandungan ke papan keratan

window.localStorage.name

1. = “Tom”
Perhatikan di sini bahawa pembolehubah rentetan memerlukan petikan. Apabila kami ingin mendapatkan semula data daripada storan tempatan, kami boleh menggunakan kaedah getItem. Keseluruhan proses kod adalah seperti berikut:

Kod JavaScript

Salin kandungan ke papan keratan

var

1. storan = window.localStorage; storage.name = “Tom”;
2. //Dapatkan data nama
3. var name1 = storage.getItem(“nama”);
4. makluman(nama1); Hasil paparan kod ini dalam konsol penyemak imbas Chrome ialah kotak gesaan yang menunjukkan Tom. Dapat dilihat bahawa kami telah menyimpan dan membaca data dengan betul dengan cara ini.
5. Jika kami ingin memadamkan data yang disimpan ini, kami boleh menggunakan kaedah removeItem. Tambahkan kod berikut pada kod di atas:

Kod JavaScript

Salin kandungan ke papan keratan

storage.removeItem(“nama”);

Pada masa ini, apabila kami maklumkan semula, null akan dipaparkan kerana data telah dikosongkan.

Setelah memahami beberapa penggunaan dan idea storan tempatan asas, mari perkenalkan storan tempatan secara sistematik.

Storan tempatan terbahagi kepada tiga kategori utama: Storan tempatan/sessionStorage/pangkalan data tempatan

Penggunaan, fungsi, kaedah panggilan, dsb. localStorage dan sessionStorage adalah sama. Antaranya, data yang disimpan dalam localStorage adalah sah untuk jangka masa yang lama, manakala maklumat yang disimpan dalam sessionStorage akan dimusnahkan apabila setiap sesi ditutup (dalam istilah orang awam, data dimusnahkan secara automatik selepas halaman ditutup).

Disebabkan ciri-ciri yang berbeza dari kedua-duanya, senario aplikasi juga sangat berbeza. Biasanya, apabila kita perlu menyimpan beberapa item konfigurasi pengguna dan maklumat data lain yang perlu disimpan untuk masa yang lama, kita perlu menggunakan localStorgae untuk menyimpannya, mengambil kesempatan daripada ciri-cirinya yang tahan lama. Sejajar dengan itu, apabila kita perlu melaksanakan fungsi berasaskan sesi seperti troli beli-belah, kita perlu menggunakan sessionStorage.

Memandangkan penggunaan localStorage dan sessionStorage adalah sama, kami mengambil localStorage sebagai contoh untuk memperkenalkan kaedah kedua-duanya.

1. Set data setItem
Penggunaan ialah localStorage.setItem("key", "value"), yang bermaksud menghantar nilai kepada kunci. (Kaedah penggunaan sessionStorage.setItem adalah sama dan tidak akan diperkenalkan satu persatu di bawah)

2. Dapatkan data getItem
Penggunaan adalah localStorage.getItem("key").

3. Padam data tertentu removeItem
Penggunaan adalah localStorage.removeItem(key) untuk memadam data yang sepadan dengan kunci.

4. Kosongkan semua data Penggunaan clear
ialah localStorage.clear(), yang bermaksud mengosongkan semua data dalam sistem storan.

Di atas adalah antara penggunaan sessionStorage/localStorage yang paling asas, saya harap ia akan membantu pembelajaran semua orang.