Panduan HTML5-5. Gunakan storan web untuk menyimpan petua tutorial data_html5 pasangan nilai kunci-Tutorial H5-php.cn

Kandungan pelajaran ini adalah untuk memperkenalkan storan web, yang digunakan untuk menyimpan data pasangan nilai kunci dalam penyemak imbas Ia berfungsi seperti kuki sebelumnya, tetapi ia lebih baik dan boleh menyimpan data yang lebih besar. Terdapat dua jenis storan web: storan tempatan dan storan sesi Mereka menggunakan mekanisme pelaksanaan yang sama, tetapi mempunyai keterlihatan dan kitaran hayat yang berbeza.
1. Gunakan storan tempatan
Kami menggunakan objek localStorage untuk mengakses storan setempat Ia mengembalikan objek Storan digunakan untuk menyimpan data pasangan nilai kunci kaedah:
clear(): Kosongkan data pasangan nilai kunci yang disimpan;
getItem(): Dapatkan nilai melalui kunci;
key(): Dapatkan nilai kunci melalui indeks;
panjang: Mengembalikan bilangan pasangan nilai kunci; : Menambah pasangan nilai kunci, Apabila pasangan nilai kunci bagi kunci yang ditentukan wujud, operasi kemas kini dilaksanakan;
Objek storan membolehkan kami menyimpan data pasangan nilai kunci dalam bentuk rentetan Kuncinya adalah unik, yang bermaksud apabila kami menggunakan kaedah setItem untuk menambah pasangan nilai kunci, jika nilai kunci sudah wujud, ia. akan dikemas kini operasi. Mari lihat contoh berikut:

Salin kod

Kodnya adalah seperti berikut:

< !DOCTYPE HTML>

: kiri;}

jadual{border-collapse: collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
input {sempadan: hitam pepejal nipis; padding: 2px;}
label{min-width: 50px;display: inline-block;text-align: right;}
#countmsg, #buttons{margin-left: 50px ;margin-top : 5px;margin-bottom: 5px;}

;
Kunci:

;Nilai:< ;/label>

="tambah" >Tambah
Terdapat item

>Bilangan Item:
displayData();
butang var = document.getElementsByTagName('button'); ; i ) {
butang[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
suis (e.target.id) {
huruf 'tambah':
var key = document.getElementById('key').value;
var value = document.getElementById('value').value;
localStorage.setItem(key, value);
kes 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData() {
var tableElement = document.getElementById ('data');
tableElement.innerHTML = '';
var itemCount = localStorage.length;
document.getElementById('count').innerHTML = itemCount; (var i = 0; i < itemCount; i ) {
var key = localStorage.key(i);
var val = localStorage.getItem(key); tr>< kekunci ':' val ''
}
}
/skrip
< ;/body>

Mari kita lihat keputusan larian:

Pelayar tidak boleh memadamkan data yang kami buat melalui localStorage melainkan pengguna memadamkannya.
2. Dengarkan acara Storan
Data yang disimpan melalui storan setempat kelihatan kepada dokumen daripada sumber yang sama Contohnya, jika anda membuka dua penyemak imbas chrome untuk mengakses alamat URL yang sama, pada mana-mana halaman Storan tempatan yang dibuat pada halaman juga boleh dilihat oleh halaman lain. Walau bagaimanapun, jika anda menggunakan penyemak imbas lain (seperti Firefox) untuk membuka alamat URL yang sama, storan setempat tidak akan kelihatan kerana ia mempunyai sumber yang berbeza. Peristiwa Penyimpanan digunakan untuk memantau perubahan dalam kandungan storan. Mari lihat atribut apa yang terkandung di dalamnya:
kunci: Mengembalikan nilai kunci yang telah diubah: Nilai lama: Mengembalikan nilai sebelum nilai kunci ditukar; : Mengembalikan nilai baharu bagi nilai kunci yang telah diubah;
url: Alamat url yang diubah;
Mari kita lihat contoh di bawah:

Salin kod

Kodnya adalah seperti berikut:

- runtuh: runtuh }
ke, td{padding: 4px;}

data" border=" 1">

key
oldValue
newValue< ke>
url 🎜>var tableElement = document.getElementById('data');
window.onstorage = fungsi (e) {
var row = ''; e.kunci '';
baris = '' e.oleValue ''; /td>';
baris = '' e.url ''; td>';
tableElement.innerHTML = baris
}
🎜>
Data yang kami tambah, padam dan storan yang diubah suai dalam Contoh 1 akan dipaparkan pada halaman Contoh 2. Contoh 2 berjalan seperti biasa dalam penyemak imbas Chrome, tetapi Firefox tidak bertindak balas Penyemak imbas lain belum diuji.

Hasil jalankan
:

3. Gunakan storan sesi
Storan sesi digunakan sama seperti storan tempatan, kecuali kebolehaksesannya terhad kepada halaman semasa dan ia akan hilang selepas halaman ditutup.

Salin kod

Kod tersebut adalah seperti berikut:

Contoh

badan > *{float: left;}
jadual{border-collapse: collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
masukan{sempadan: hitam pepejal nipis;lapik: 2px;}
label{lebar-min: 50px;paparan: blok sebaris;sejajarkan teks: kanan;}
#countmsg, #buttons{margin- kiri: 50px;margin-atas: 5px;margin-bawah: 5px;}

Kunci:

Nilai:

Terdapat item

displayData();
butang var = document.getElementsByTagName("butang");
untuk (var i = 0; i < buttons.length; i ) {
butang[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'add':
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
sessionStorage.setItem(kunci, nilai);
pecah;
kes 'clear':
sessionStorage.clear();
pecah;
}
displayData();
}
function displayData() {
var tableElement = document.getElementById('data');
tableElement.innerHTML = '';
var itemCount = sessionStorage.length;
document.getElementById('count').innerHTML = itemCount;
untuk (var i = 0; i < itemCount; i ) {
var key = sessionStorage.key(i);
var val = sessionStorage.getItem(key);
tableElement.innerHTML = "";
}
}

运行效果：

你在例3中做任何修改，例2的页面不会发生任何改变。
总结总结localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
simpanan web和kuki的区别：匫王中的区别：匫网的区别：匫王的公一一一一一一远不会过期的。是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中中中文需要指定作用域，不可以跨域调用。除此之外，Storan Web拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。还有，还有，simpanan web柏个柏个立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器二进行中可一部分而存在，而 Storan Web仅仅是为了在本地“存储”数据而生。

源码下载

Label berkaitan：

storage 存储

sumber：php.cn

Artikel sebelumnya：html5 Tutorial lukisan kanvas (2)—Melukis garis lurus dan menetapkan gaya garisan seperti kemahiran tutorial warna/titik akhir/simpang_html5 Artikel seterusnya：html5 Tutorial lukisan kanvas (1)—Pengetahuan asas kemahiran tutorial drawing_html5

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang