Storan web HTML5
Storan Web HTML5
Menggunakan HTML5, data penyemakan imbas pengguna boleh disimpan secara setempat.
Terdahulu, storan tempatan menggunakan kuki. Tetapi storan Web perlu lebih selamat dan cepat Data tidak akan disimpan pada pelayan, tetapi data hanya akan digunakan apabila pengguna meminta data tapak web Ia juga boleh menyimpan sejumlah besar data tanpa menjejaskan prestasi laman web.
Storan Web bagi storan tempatan HTML5
Storan Web ialah ciri yang sangat penting yang diperkenalkan oleh HTML5 dan sering digunakan di hadapan- akhir pembangunan. Data boleh disimpan secara tempatan pada klien, serupa dengan kuki HTML4, tetapi fungsinya boleh menjadi lebih berkuasa daripada kuki Saiz kuki dihadkan kepada 4KB, dan Storan Web secara rasmi mengesyorkan 5MB untuk setiap tapak web. Storan Web terbahagi kepada dua jenis:
sessionStorage
localStorage
Secara literal Ia boleh dilihat dengan jelas bahawa sessionStorage menyimpan data dalam sesi dan hilang apabila penyemak imbas ditutup manakala localStorage sentiasa menyimpan data secara setempat pada klien Melainkan data dipadamkan secara aktif, data tidak akan luput; localStorage, API yang boleh digunakan adalah sama Kaedah yang biasa digunakan adalah seperti berikut:
Simpan data: localStorage.setItem( key, value ); nilai );
Baca data: localStorage.getItem( key ); sessionStorage.getItem( key );
Padam semua data: localStorage.clear( ); sessionStorage.clear( );
Dapatkan kunci indeks: localStorage.key( index ); 🎜>
Kedua-duanya mempunyai panjang atribut yang menunjukkan bilangan kunci, iaitu panjang kunci:
var keyLength1 = localStorage.length var keyLength2 = sessionStorage . panjang;
Seperti di atas, kedua-dua kunci dan nilai mestilah rentetan, dengan kata lain, API Storan web hanya boleh beroperasi pada rentetan.
Sebelum menggunakan storan web, anda harus menyemak sama ada penyemak imbas menyokong localStorage dan sessionStorage:
if(typeof(Storage)! ==="undefined")
{ // Ya! Menyokong objek localStorage sessionStorage!
// Beberapa kod....
} lain {
// Maaf storan Web tidak disokong.
}
Contoh:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5--本地存储</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
