sessionStorage的使用：
（1）數據存儲到當前頁面，存儲容量5mb左右。
（2）同一個瀏覽器不同頁面無法共享數據。
生命週期：關閉當前頁面就清除。
相關函數：
setItem(key,value); //以鍵值對的方式存儲數據
getItem(key); //通過key獲取對應的value值
removeItem(key); //通過key刪除對應的value值
clear(); //清空所有存儲的內容
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage的使用</title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="username" /><br/><br/>
<input type="button" value="保存數據" id="save" />
<input type="button" value="獲取數據" id="get" />
<input type="button" value="刪除數據" id="del" />
</body>
<script>
document.querySelector("#save").onclick=function(){
var name=document.querySelector("#username").value;
window.sessionStorage.setItem("username",name);
}
document.querySelector("#get").onclick=function(){
var data=window.sessionStorage.getItem("username");
alert(data);
}
document.querySelector("#del").onclick=function(){
window.sessionStorage.removeItem("username");
}
</script>
</html>
localStorage的使用：
（1）存儲在硬盤上，存儲容量20mb左右。
（2）同一個瀏覽器不同窗口可以共享數據。
生命週期：永久保存，存儲在硬盤上，不會隨着當前頁面關閉而清除。
相關函數：
setItem(key,value); //以鍵值對的方式存儲數據
getItem(key); //通過key獲取對應的value值
removeItem(key); //通過key刪除對應的value值
clear(); //清空所有存儲的內容
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage的使用</title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="username" /><br/><br/>
<input type="button" value="保存數據" id="save" />
<input type="button" value="獲取數據" id="get" />
<input type="button" value="刪除數據" id="del" />
</body>
<script>
document.querySelector("#save").onclick=function(){
var name=document.querySelector("#username").value;
window.localStorage.setItem("username",name);
}
document.querySelector("#get").onclick=function(){
var data=window.localStorage.getItem("username");
alert(data);
}
document.querySelector("#del").onclick=function(){
window.localStorage.removeItem("username");
}
</script>
</html>