HTML5ウェブストレージ
HTML5 Web ストレージ
HTML5 を使用すると、ユーザーの閲覧データをローカルに保存できます。
以前は、ローカル ストレージで Cookie が使用されていました。ただし、Web ストレージはより安全で高速である必要があります。データはサーバーに保存されませんが、ユーザーが Web サイトのデータを要求した場合にのみ使用されます。また、Web サイトのパフォーマンスに影響を与えることなく、大量のデータを保存することもできます。
HTML5 ローカル ストレージの Web ストレージ
Web ストレージは、HTML5 で導入された非常に重要な機能で、HTML4 Cookie と同様に、クライアント上にデータをローカルに保存できます。ただし、Cookie よりもはるかに強力な機能を実現でき、Cookie のサイズは 4KB に制限されており、Web Storage は公式に Web サイトごとに 5MB を推奨しています。 Web Storage は 2 つのタイプに分類されます:
sessionStorage
localStorage
文字通りの意味から、sessionStorage はセッション内のデータを保存し、ブラウザを閉じるとデータが失われることが明確にわかります。 localStorage は常にデータをクライアント上でローカルに保存します。データがアクティブに削除されない限り、データは期限切れになりません。sessionStorage であっても、localStorage であっても、使用できる API は同じです。
データの保存: localStorage.setItem( key );
データの読み取り: localStorage.getItem( key );
単一のデータの削除: localStorage.removeItem( key );
すべてのデータの削除: localStorage.clear( ); sessionStorage.clear( );
インデックスのキーを取得します: localStorage.key(index ); sessionStorage.key(index );
どちらもキーの数を示す属性長を持っています。キーの長さ:
var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length;
上記のように、キーと値の両方は文字列である必要があります。文字列を操作します。
Webストレージを使用する前に、ブラウザがlocalStorageとsessionStorageをサポートしているかどうかを確認する必要があります:
if(typeof(Storage)!=="unknown")
{ // はい、localStorage sessionStorage オブジェクトをサポートします。
// いくつかのコード...
} else {
// 申し訳ありませんが、Web ストレージはサポートされていません。
}
例:
<!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>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
