web storage提供兩種方式將數據保存在客戶端:一種是localStorage,另一種是sessionStorage;
(一)存儲、讀取和清除localStorage
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>localStorage</title>
<script type="text/javascript">
function onLoad(){
if(typeof(Storage)=="undefined"){
alert("sorry!");
}else{
btn_save.addEventListener("click",saveToLocalStroage);
btn_load.addEventListener("click",loadFromLocalStrage);
btn_clear.addEventListener("click",clearLocalStorage);
}
}
function saveToLocalStroage(){
localStorage.username=inputname.value;
}
function loadFromLocalStrage(){
show_LocalStorage.innerHTML=localStorage.username+"你好,歡迎!"
}
function clearLocalStorage(){
localStorage.clear();
show_LocalStorage.innerHTML=localStorage.username;
}
</script>
</head>
<body onload="onLoad()">
<label for="userName">請輸入你的名稱:</label><input type="text" id="inputname" value="" />
<br />
<div id="show_LocalStorage"></div>
<button id="btn_save">存儲到LocalStorage</button>
<button id="btn_load">從LocalStorage讀取數據</button>
<button id="btn_clear">清除LocalStorage數據</button>
</body>
</html>
(二)存儲、讀取和清除sessionStorage
(1)存儲:
window.sessionStorage.setItem(“userdata”,”hello h5”);
window.sessionStorage[“userdata”]=”hello h5”;
window.sessionStorage.userdata=”hello h5”;
(2)讀取
var valueOne=window.sessionStorage.getItem(“userdata”);
var valueOne=window.sessionStorage[“userdata”];
var valueOne=window.sessionStorage.userdata;
(3)清除
window.sessionStorage.removeItem(“userdata”);
delete window.sessionStorage[“userdata”];
delete window.sessionStorage.userdata;
//全部清除
sessionStorage.clear();