ホームページ > 記事 > ウェブフロントエンド > HTML5 Web ページのストレージ
HTML5 Web ページのストレージ
- 零到壹度オリジナル
- 2018-03-26 14:29:151530ブラウズ
今回は、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 つの違いは、宣言期間と有効範囲にあります。
| 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
;-
localStorageデータの特定の部分を削除したい場合は、removeItemを呼び出すことができますメソッドまたは delete 属性を使用して削除します。<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を削除します 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
,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();
- key
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储sessionStorage</title>
<script type="text/javascript">
function onLoad(){
inputSpan.style.display = 'none';
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 = 'none'; /*隐藏“登录”按钮*/
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 = '';
}
function clearLocalStorage(){
localStorage.clear(); /*情况localStorage*/
show_LocalStorage.innerHTML = "已成功注销！";
btn_login.style.display = ''; /*显示“登录”按钮*/
inputSpan.style.display = ''; /*显示姓名输入框和“提交”按钮*/
}
</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 サイトの他の関連記事を参照してください。