ホームページ > 記事 > ウェブフロントエンド > HTML5 ローカル ストレージ アプリケーション sessionStorage と localStorage
HTML5 ローカル ストレージ アプリケーション sessionStorage と localStorage
- 大家讲道理オリジナル
- 2017-08-19 14:13:402762ブラウズ
HTML5 が登場する前は、ブラウザーは一般に Cookie を使用してデータを保存していましたが、Cookie にはドメイン名とサイズの制限がありました。
HTML5 が普及した後は、localStorage と sessionStorage を介してブラウザー側でデータを保存できるようになりました。これら 2 つの利点は何ですか?機能についてはどうですか？
sessionStorage
SessionStorage は、ページが開かれてからページが閉じられるまでの一時的なセッションです。閉じるとローカルストレージが消滅します
localStorage
永続ストレージ（データは手動で削除可能）
ストレージ制限（5M）
クライアントによって完了され、サーバー処理を要求しません
-
sessionStorage データはページ間で共有できませんが、localStorage はページ間で共有できます
sessionStorage アプリケーション:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
window.sessionStorage.setItem("name", aInput[3].value );
};
aInput[1].onclick = function(){
alert(window.sessionStorage.getItem("name" ));
};
aInput[2].onclick = function(){
window.sessionStorage.removeItem("name" );
};
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>localStorage アプリケーション
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//localStorage : 永久性存储
window.localStorage.setItem("name", aInput[3].value);
window.localStorage.setItem("name2", 'aaaaa');
};
aInput[1].onclick = function(){
alert( window.localStorage.getItem( "name" ) );
alert( window.localStorage.getItem( "name2" ) );
};
aInput[2].onclick = function(){
window.localStorage.removeItem("name");
// window.localStorage.clear();
};
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>rree以上がHTML5 ローカル ストレージ アプリケーション sessionStorage と localStorageの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。