首頁  >  文章  >  web前端  >  HTML5之網頁存儲

HTML5之網頁存儲

零到壹度
零到壹度原創
2018-03-26 14:29:151509瀏覽

這次帶給大家HTML5之網頁儲存 ,HTML5之網頁儲存 的注意事項有哪些,以下就是實戰案例,一起來看一下。

HTML5 網頁儲存Web Storage

#一、認識Web Storage

Web Storage是一種將少量資料儲存在客戶端(client)磁碟的技術。只要支援WebStorage API規格的瀏覽器,網頁設計者都可以使用JavaScript來操作它,我們先來了解Web Storage。

Web Storage的容量由客戶端瀏覽器決定,通常1MB~5MB。

Web Storage純粹執行客戶端,不會每次網頁要求連帶傳送給服務端。

Web Storage以一組key-value對應儲存資料。

Web Storage提供兩種方式將資料保存在客戶端:一種是localStorage,一種是sessionStorage,兩者的差異在於申明週期和有效範圍。

表一Web Storage類型的差異
Web Storage類型 。生命週期 有效範圍
localStorage #執行刪除指令時才會消失 同一網站的網頁可以跨視窗和分頁
sessionStorage 瀏覽器視窗或分頁(tab)關閉就會消失 只對目前瀏覽器視窗或分頁有效
#

偵測瀏覽器是否支援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測試時需要把檔案上傳到伺服器或localhost才能運作。建議測試時使用Google Chrome瀏覽器。

二、具體學習

#1、存取localStorage

  • 相同網站是指:協定、主機(domain與ip)、傳輸連接埠(port)都必須相同。

    • WebStorage只允許儲存字串資料,有以下3種存取localStorage的方法,前面的window可以不寫 Storage物件的setItem和getItem方法(

      key:"userdata",value:"Hello World"
    • # )

  • value

  • );
    • 讀取:var v = window.localStorage.getItem(##key ##);

    • #陣列索引

儲存:window.localStorage[

key##] =value

;

讀取:var v = window.localStorage[

key#];

屬性

# 儲存:window.localStorage.HTML5之網頁存儲

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>
      #二、刪除localStorage #要刪除某一條localStorage數據,可以呼叫removeItem方法或是delete屬性來刪除。 window.localStorage.removeItem("userdata");

    • delete window.localStorage.userdata;

      #delete.window.localStorage["userdata"];#要想刪除全部的localStorage數據,可以使用clear()方法。 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>
      ########## ########三、存取sessionStorage########################」儲存############################################## ###########window.sessionStorage.######setItem#######(#########key#########,# ########value#########);##################window。sessionStorage [############################################################################################################################################################################# #key#########] = [#########value##########];#######
    • 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之網頁存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn