標籤：html5
Web Storage是什嗎？
Web Storage功能，顧名思義，就是在Web上針對用戶端本地儲存資料的功能，具體來說Web Storage分為兩種；
sessionStorage：
將資料儲存在session對象中，所謂session是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是使用者瀏覽這個網站所花費的時間。session對象可以用來儲存在這段時間內所要求儲存的任何資料。
localStorage：
將資料儲存在用戶端本地的硬體裝置（通常指硬碟，當然可以是其他的硬體裝置）中，即是瀏覽器被關閉了，該資料仍然存在，下次開啟瀏覽器訪問網站時，仍然可以繼續使用。
sessionStorage與localStorage區別：
這兩者的區別在於sessionStorage為臨時儲存，而localStorage為永久儲存，下一節，我們將結合執行個體深入學習！
為什麼要引出webStorage?原因是： cookies儲存永久資料存在一下幾個問題：
1、cookies的大小被限制在4KB；
2、cookies是隨HTTP事務一起發送的，因此會浪費一部分發送cookies時所使用的頻寬；
3、cookies操作繁瑣複雜；
1、1 SessionStorage：
將資料儲存在session對象中，所謂session是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間會話，也就是使用者瀏覽這個網站所花費的時間就是session的生命週期。session對象可以用來儲存在這段時間內所要求儲存的任何資料。
此對象主要有兩個方法：
儲存資料：sessionStorage.setItem(Key, value);
讀取資料：sessionStorage.getItem(Key);
Key：表示你要存入的鍵名稱，此名稱可以隨便命名，可以按照變數的意思來理解。
Value：表示值，也就是你要存入Key中的值，可以按照變數賦值來理解。
使用方法：
儲存資料：sessionStorage.setItem("website", "W3Cfuns.com");
讀取資料：sessionStorage.getItem("website");
exaple：
<!
DOCTYPE
HTML>
<
html>
<
head>
<
meta
charset="utf-8">
<
title>本機存放區SessionStorage</
title>
<
script
type="text/javascript">
window.
onload = function()
{
alert("當你關閉此頁面或者關閉瀏覽器的時候，sessionStorage中儲存的資料才會消失，也就是說重新開啟此頁面的時候，點擊擷取資料，將不會顯示任何資料，重新整理頁面無效。\r\n由此可以證明，sessionStorage的生命週期為，某個使用者瀏覽網站時，從進入到離開的這段時間。")
//首先獲得
body中的3個
input元素
var msg =
document.getElementById("msg");
var getData =
document.getElementById("getData");
var setData =
document.getElementById("setData");
setData.
onclick = function(){//存入資料
if(msg.
value){
sessionStorage.setItem("data", msg.
value);
alert("資訊已儲存到data欄位中");
}else{
alert("資訊不可為空");
}
}
getData.
onclick = function(){//擷取資料
var msg = sessionStorage.getItem("data");
if(msg){
alert("data欄位中的值為：" + msg);
}else{
alert("data欄位無值！");
}
}
}
</
script>
</
head>
<
body>
<
input
id="msg"
type="text"/>
<
input
id="setData"
type="button"
value="儲存資料"/>
<
input
id="getData"
type="button"
value="擷取資料"/>
</
body>
</
html>
1、2 LocalStorage：
使用方法與SessionStorage如出一轍，如下代碼所示：
此對象主要有兩個方法：
儲存資料：localStorage.setItem(Key, value);
讀取資料：localStorage.getItem(Key);
Key：表示你要存入的鍵名稱，此名稱可以隨便命名，可以按照變數的意思來理解。
Value：表示值，也就是你要存入Key中的值，可以按照變數賦值來理解。
使用方法：
儲存資料：localStorage.setItem("website", "W3Cfuns.com");
讀取資料：localStorage.getItem("website");exaple:
<!
DOCTYPE
HTML>
<
html>
<
head>
<
meta
charset="utf-8">
<
title>本機存放區LocalStorage</
title>
<
script
type="text/javascript">
window.
onload = function()
{
alert("當你關閉此頁面或者關閉瀏覽器的時候，localStorage中儲存的資料才會消失，也就是說重新開啟此頁面的時候，點擊擷取資料，可以取到資料。")
//首先獲得
body中的3個
input元素
var msg =
document.getElementById("msg");
var getData =
document.getElementById("getData");
var setData =
document.getElementById("setData");
setData.
onclick = function(){//存入資料
if(msg.
value){
localStorage.setItem("data", msg.
value);
alert("資訊已儲存到data欄位中");
}else{
alert("資訊不可為空");
}
}
getData.
onclick = function(){//擷取資料
var msg = localStorage.getItem("data");
if(msg){
alert("data欄位中的值為：" + msg);
}else{
alert("data欄位無值！");
}
}
}
</
script>
</
head>
<
body>
<
input
id="msg"
type="text"/>
<
input
id="setData"
type="button"
value="儲存資料"/>
<
input
id="getData"
type="button"
value="擷取資料"/>
</
body>
</
html>
