在客戶端存儲數據
HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，
但是 cookie 不適合大量數據的存儲，因爲它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成爲可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
代碼：
<form name="forml" action="" id="forml">
姓名:<input type="text" name="username"/>
<input type="submit" value="submit" name="submit"/>
</form>
<script>
var oform = document.getElementsByTagName('form')[0];
var oinput = oform.submit;
oform.onsubmit = function(){
var ovalue = oform.username.value;
localStorage.username = ovalue;
}
window.onload = function(){
if(localStorage.username){
oform.username.value=localStorage.username;
}
else{
oform.username.value="填寫姓名";
}
}
</script>
localStorage方法存儲的數據沒有時間限制的
sessionStorage方法sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除
代碼修改如下：
var oform = document.getElementsByTagName('form')[0];
var oinput = oform.submit;
oform.onsubmit = function(){
var ovalue = oform.username.value;
//localStorage.username = ovalue;
sessionStorage.username = ovalue;
}
window.onload = function(){
//if(localStorage.username){
if(sessionStorage.username){
// oform.username.value=localStorage.username;
oform.username.value=sessionStorage.username;
}
else{
oform.username.value="填寫姓名";
}
console.log(sessionStorage);
}