HTML5ウェブストレージ
HTML5 Web ストレージ
HTML5 を使用すると、ユーザーの閲覧データをローカルに保存できます。
以前は、ローカル ストレージで Cookie が使用されていました。ただし、Web ストレージはより安全で高速である必要があります。データはサーバーに保存されませんが、ユーザーが Web サイトのデータを要求した場(chǎng)合にのみ使用されます。また、Web サイトのパフォーマンスに影響を與えることなく、大量のデータを保存することもできます。
HTML5 ローカル ストレージの Web ストレージ
Web ストレージは、HTML5 で導(dǎo)入された非常に重要な機(jī)能で、HTML4 Cookie と同様に、クライアント上にデータをローカルに保存できます。ただし、Cookie よりもはるかに強(qiáng)力な機(jī)能を?qū)g現(xiàn)でき、Cookie のサイズは 4KB に制限されており、Web Storage は公式に Web サイトごとに 5MB を推奨しています。 Web Storage は 2 つのタイプに分類されます:
sessionStorage
localStorage
文字通りの意味から、sessionStorage はセッション內(nèi)のデータを保存し、ブラウザを閉じるとデータが失われることが明確にわかります。 localStorage は常にデータをクライアント上でローカルに保存します。データがアクティブに削除されない限り、データは期限切れになりません。sessionStorage であっても、localStorage であっても、使用できる API は同じです。
データの保存: localStorage.setItem( key );
データの読み取り: localStorage.getItem( key );
単一のデータの削除: localStorage.removeItem( key );
すべてのデータの削除: localStorage.clear( ); sessionStorage.clear( );
インデックスのキーを取得します: localStorage.key(index ); sessionStorage.key(index );
どちらもキーの數(shù)を示す屬性長(zhǎng)を持っています。キーの長(zhǎng)さ:
var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length;
上記のように、キーと値の両方は文字列である必要があります。文字列を操作します。
Webストレージを使用する前に、ブラウザがlocalStorageとsessionStorageをサポートしているかどうかを確認(rèn)する必要があります:
if(typeof(Storage)!=="unknown")
{ // はい、localStorage sessionStorage オブジェクトをサポートします。
// いくつかのコード...
} else {
// 申し訳ありませんが、Web ストレージはサポートされていません。
}
例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5--本地存儲(chǔ)</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="對(duì)不起，您的瀏覽器不支持 web 存儲(chǔ)。";
}
}
</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)卡(或窗口),重新打開(kāi)此頁(yè)面,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
</body>
</html>
