Penyimpanan Web adalah fungsi yang sangat penting yang diperkenalkan oleh HTML5. Ini dapat menyimpan data secara lokal di sisi klien. Ini mirip dengan cookie HTML4, tetapi dapat menerapkan fungsi yang jauh lebih kuat daripada cookie. Ukuran kue terbatas pada 4KB. Pejabat penyimpanan web merekomendasikan 5MB per situs web.
Penyimpanan web dibagi menjadi dua jenis :SesiStorage
LocalStorage
Dapat dilihat dengan jelas dari makna literal bahwa SesiStorage menyimpan data dalam sesi, dan browser ditutup; LocalStorage menyimpan data secara lokal pada klien;
Apakah itu Sesi Sesi atau LocalStorage, API yang dapat digunakan adalah sama. Yang umum digunakan adalah sebagai berikut (mengambil storstorage sebagai contoh):
Simpan data: localstorage.setItem (kunci, nilai);
Data Baca: LocalStorage.GetItem (key);
Hapus data individual: localstorage.removeItem (key);
Hapus semua data: localstorage.clear ();
Dapatkan kunci indeks tertentu: localstorage.key (index);
Seperti disebutkan di atas, baik kunci dan nilainya harus string. Dengan kata lain, API penyimpanan web hanya dapat memanipulasi string.
Selanjutnya, kami mengembangkan applet buku alamat sederhana melalui penyimpanan web untuk menunjukkan cara menggunakan API terkait; Kami ingin mengimplementasikan fungsi -fungsi berikut:
Masukkan orang kontak. Orang kontak memiliki dua bidang: nama dan nomor ponsel, dan menggunakan nomor ponsel sebagai kunci untuk menyimpannya di LocalStorage;
Temukan pemilik sesuai dengan nomor ponsel;
Sebutkan semua informasi kontak yang disimpan saat ini;
Pertama, siapkan halaman HTML sederhana, sebagai berikut :<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8"/>
<Title> HTML5 Artikel Penyimpanan Web Lokal </iteme>
</head>
<body>
<Div style = "Border: 2px putus-putus #CCC; Lebar: 320px; Text-Align: Center;">
<label untuk = "user_name"> Nama: </label>
<input type = "text" id = "user_name" name = "user_name"/>
<br/>
<Label untuk = "MobilePhone"> Ponsel: </label>
<input type = "text" id = "MobilePhone" name = "MobilePhone"/>
<br/>
<input type = "tombol" ontClick = "save ()" value = "add record"/>
<hr/>
<label untuk = "search_phone"> Masukkan nomor ponsel: </label>
<input type = "text" id = "search_phone" name = "search_phone"/>
<input type = "tombol" ontClick = "find ()" value = "temukan pemilik"/>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<Div id = "list">
</div>
</body>
</html>
Antarmuka ditampilkan sebagai berikut :Untuk menyimpan kontak, Anda hanya perlu menerapkan metode JS berikut:
// Simpan data
fungsi save () {
var mobilephone = document.getElementById ("MobilePhone"). Nilai;
var user_name = document.geteLementById ("user_name"). value;
localstorage.setitem (MobilePhone, user_name);
}
Untuk mengimplementasikan pemilik pencarian, metode JS berikut diimplementasikan :// Temukan data
fungsi find () {
var search_phone = document.getElementById ("search_phone"). value;
var name = localstorage.getItem (search_phone);
var find_result = document.getElementById ("find_result");
Pemilik find_result.innerHtml = search_phone + "adalah:" + nama;
}
Untuk menampilkan semua informasi kontak yang disimpan, Anda perlu menggunakan metode localstorage.key (indeks), sebagai berikut:
// Ekstrak semua objek yang disimpan di LocalStorage dan menampilkannya di antarmuka
function loadAll () {
var list = document.geteLementById ("list");
if (localstorage.length> 0) {
var result = "<tabel border = '1'>";
Hasil += "<tr> <td> Nama </td> <td> Nomor telepon seluler </td> </tr>";
untuk (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var name = localstorage.getItem (Mobilephone);
Hasil+= "<tr> <td>"+name+"</td> <td>"+MobilePhone+"</td> </tr>";
}
result += "</able>";
list.innerhtml = hasil;
}kalau tidak{
list.innerhtml = "Data saat ini kosong, cepat dan mulai menambahkan kontak";
}
}
Efeknya adalah sebagai berikut:
Pertanyaan: Seperti disebutkan di atas, hanya ada 2 bidang, nama dan nomor ponsel. Jika Anda ingin menyetor informasi kontak yang lebih kaya, seperti nama perusahaan, alamat rumah, dll. Bagaimana cara mencapainya? Bukankah penyimpanan web hanya dapat memproses string? Pada saat ini, Anda dapat menggunakan metode JSON Stringy () untuk mengubah objek kompleks menjadi string dan menyimpannya di penyimpanan web; Saat dibaca dari penyimpanan web, Anda dapat mengubahnya menjadi objek JSON melalui metode Parse () JSON;
Demonstrasi singkat berikut menambahkan atribut perusahaan untuk menyimpan kode JS :// Simpan data
fungsi save () {
var contact = objek baru;
contact.user_name = document.getElementById ("user_name"). value;
contact.mobilephone = document.getElementById ("Mobilephone"). Nilai;
contact.company = document.getElementById ("perusahaan"). nilai;
var str = json.stringify (kontak);
localstorage.setitem (contact.mobilephone, str);
loadAll ();
}
// Ekstrak semua objek yang disimpan di LocalStorage dan menampilkannya di antarmuka
function loadAll () {
var list = document.geteLementById ("list");
if (localstorage.length> 0) {
var result = "<tabel border = '1'>";
Hasil += "<tr> <td> Nama </td> <td> seluler </td> <td> perusahaan </td> </tr>";
untuk (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var str = localstorage.getItem (Mobilephone);
var contact = json.parse (str);
Hasil+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.company+"</td> </tr>";
}
result += "</able>";
list.innerhtml = hasil;
}kalau tidak{
list.innerhtml = "Data saat ini kosong, cepat dan mulai menambahkan kontak";
}
}
Efeknya adalah sebagai berikut: