這次帶給大家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類型 | 。生命週期 | 有效範圍 |
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.
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"];#要想刪除全部的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 = '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之網頁存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章!