HTML5 Web ページのストレージ-htmlチュートリアル-php.cn

HTML5 Web ページのストレージ

零到壹度

リリース： 2018-03-26 14:29:15

オリジナル

1554 人が閲覧しました

今回は、HTML5 Web ページのストレージと、HTML5 Web ページのストレージに関する注意事項について説明します。以下は実際のケースです。見てみましょう。

HTML5 Web ストレージ Web ストレージ

1. Web ストレージについて理解する

Web ストレージは、少量のデータをクライアントディスクに保存するテクノロジーです。ブラウザが WebStorage API 仕様をサポートしている限り、Web デザイナーは JavaScript を使用して Web Storage を操作できます。まず、Web Storage について理解しましょう。

Webストレージの容量はクライアントのブラウザによって決まり、通常は1MB〜5MBです。

Web Storage は純粋にクライアントを実行し、Web ページの各リクエストをサーバーに送信しません。

Web Storage は、データをキーと値のペアのセットに保存します。

Web Storage では、クライアント上にデータを保存する方法が 2 つあります。1 つは localStorage で、もう 1 つは sessionStorage です。この 2 つの違いは、宣言期間と有効範囲にあります。

**表 1 Web ストレージタイプの違い**
Web ストレージタイプ	ライフサイクル	有効範囲
localStorage	削除コマンドを実行すると消えます	同じWebサイトのWebページはウィンドウやページネーションにまたがることができます
セッションストレージ	ブラウザウィンドウまたはタブを閉じると消えます	現在のブラウザウィンドウまたはタブにのみ有効です

ブラウザが Web Storage をサポートしているかどうかを検出します。構文は次のとおりです:

if(typeof(Storage)=="undefined"){
<span style="white-space:pre">	</span>alert("您的浏览器不支持Web Storage");
}
else{
<span style="white-space:pre">	</span>//localStorage和sessionStorage程序代码
}

ログイン後にコピー

注: IE と Firefox をテストする場合、ファイルをサーバーまたはローカルホストにアップロードして実行する必要があります。テスト時には Google Chrome ブラウザを使用することをお勧めします。

2. 具体的な学習

1. localStorage にアクセスする

同じ Web サイトとは、プロトコル、ホスト (ドメインと IP)、送信ポート (ポート) が同じであることを意味します。。

WebStorage は文字列データの保存のみを許可します。 localStorage にアクセスするには、次の 3 つのメソッドがあります。前のウィンドウでは、Storage オブジェクト (key: ") の setItem メソッドと getItem メソッドを記述する必要はありません。 userdata"、値: "Hello World"

)

Storage: window.localStorage.setItem(key

value
); 読み取り: var v = window.localStorage.getItem(key
);
配列インデックス

Storage: window.localStorage[key
]

価値
;読み取り: var v = window.localStorage[key
];
Storage: window.localStorage.
key =value
;

読む: var v = window.localStorage.key

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
	}
}

function saveToLocalStorage(){
	<strong>localStorage.username = inputname.value;</strong>
}
function loadFromLocalStorage(){
	<strong>show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";</strong>
}
</script>
</head>

<body onload="onLoad()">
请输入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>

</body>
</html></span><span style="font-size: 18px;">
</span>

ログイン後にコピー

two、localStorageを削除します

localStorageデータの特定の部分を削除したい場合は、removeItemを呼び出すことができますメソッドまたは delete 属性を使用して削除します。

window.localStorage.removeItem("userdata"); delete window.localStorage.userdata;

localStorage.clear();

<!DOCTYPE html>
<html>
<head>
<title>网页存储localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
		btn_clear.addEventListener("click",clearLocalStorage);
	}
}

function saveToLocalStorage(){
	localStorage.username = inputname.value;
}
function loadFromLocalStorage(){
	show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";
}
function clearLocalStorage(){
	<strong>localStorage.clear();</strong>
	show_LocalStorage.innerHTML = localStorage.username;
}
</script>
</head>

<body onload="onLoad()">
请输入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
<button id="btn_clear">清除localStorage数据</button>

</body>
</html>

ログイン後にコピー

3. sessionStorageにアクセスします

window.sessionStorage.

setItem

(

key HTML5 Web ページのストレージ

,value

window.sessionStorage [

]
] = [価値] ;
window.sessionStorage.key= value;

读取

var v = window.sessionStorage.getItem(key);
var v = window.sessionStorage [key];
var v = window.sessionStorage.key;

清除

window.sessionStorage.removeItem(key);
delete window.sessionStorage.key;
delete window.sessionStorage [key];
//全部清除
sessionStorage.clear();

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储sessionStorage</title>
<script type="text/javascript">
function onLoad(){
	inputSpan.style.display = &#39;none&#39;;
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		/*判断姓名是否已经存入localStorage，已存入时才执行{ }内的命令*/
		if(localStorage.username){
			/*数据不存在时返回undefined*/
				if(!localStorage.counter){
					localStorage.counter = 1;	/*初始值设为1*/
				}
				else{
					localStorage.counter++;		/*递增*/
				}
				btn_login.style.display = &#39;none&#39;;	/*隐藏“登录”按钮*/
				show_LocalStorage.innerHTML = localStorage.username+"你好，这是你第"+localStorage.counter+"次来到网站";
		}
		btn_login.addEventListener("click",login);
		btn_send.addEventListener("click",sendok);
		btn_logout.addEventListener("click",clearLocalStorage);
	}
}

function sendok(){
	localStorage.username = inputname.value;
	location.reload();		/*重载网页*/
}
function login(){
	inputSpan.style.display = &#39;&#39;;
}
function clearLocalStorage(){
	localStorage.clear();		/*情况localStorage*/
	show_LocalStorage.innerHTML = "已成功注销！";
	btn_login.style.display = &#39;&#39;;	/*显示“登录”按钮*/
	inputSpan.style.display = &#39;&#39;;	/*显示姓名输入框和“提交”按钮*/
}
</script>
</head>

<body onload="onLoad()">
<button id="btn_login">登录</button>
<button id="btn_logout">注销</button><br />
<span id="inputSpan">请输入你的姓名：<input type="text" id="inputname" value="" /><button id="btn_send">提交</button></span><br />
<p id="show_LocalStorage"></p><br />
</body>
</html></span><span style="font-weight: bold; font-size: 24px;">
</span>

ログイン後にコピー

注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"

上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就会出现”11111......“

JavaScript将字符串转换成为数字可以用Number()方法，localStorage.counter =Number(localStorage.counter )+1;
以上がHTML5 Web ページのストレージの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。