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=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對不起，您的瀏覽器不支持 web 存儲。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">點(diǎn)我！</button></p>
<div id="result"></div>
<p>點(diǎn)擊該按鈕查看計(jì)數(shù)器的增加。</p>
<p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),重新打開此頁面,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
</body>
</html>
