學習html5本地存儲localStorage，sessionStorage

 在客戶端存儲數據

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);

}