HTML5中的資料儲存
1.初始WebStorage
2.使用WebStorage中的API
一.什麼是Web Storage
WebStorage功能就是在Web上儲存資料的功能，而這裡的儲存，是針對客戶端本地而言的。它包含兩種儲存型別：sessionStorage和localStroage二者都支援在同域下儲存5MB資料，與cookies相比有著明顯的優勢。
sessionStorage將資料儲存在session物件中。所謂session,是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，即瀏覽這個網站所花費的事件。session物件可以用來儲存在這段時間內索要儲存的任何資料。
localStroage將資料儲存在客戶端本地的硬體裝置中，即使關閉了瀏覽器，改資料仍然存在，下次開啟瀏覽器訪問網站仍然可以繼續使用。
這兩種不同的儲存型別區別在於,sessionStorage為臨時儲存，而localStoage為永久儲存。
二.使用webstorage中的API
| API |
描述 |
| length |
獲取當前WebStorage中的數目 |
| key |
返回WebStorage中的第N個儲存條目 |
| getItem(key) |
返回指定key的儲存內容，如果不存在則返回null。注意,返回的型別是字串型別 |
| setItem(key,value) |
設定指定key的內容的值為value |
| removeItem(key) |
根據指定的key，刪除鍵值為key的內容 |
| clear |
清空webStorage的內容 |
2.1 資料的儲存與獲取
在localStorage中設定鍵值對可以應用setItem()
| localStorage.setItem("key","value") |
在localStorage獲取資料可以用getItem()
| var val = localStroage.getItem("key") |
當然也可以直接使用localStorage的key方法，而不使用setItem()和getItem()，程式碼如下:
| localStroage.key = "value" var val = localStroage.key |
2.2 資料的刪除和清空
removeItem()用於Stroage列表刪除資料
| var val = localStroage. removeItem(key) |
clear()方法用於清空整個列表的所有資料
| localStroage.clear() |
同時可以通過使用length屬性獲取sessionStorage中儲存的鍵/值對的個數
2.2 JSON物件儲存(重點)
雖然HTML5 Web Storage 規範允許將任意的型別的物件儲存為鍵/值對的形式，實際情況卻是一些瀏覽器將資料限定為文字字串型別。不過，既然主流的瀏覽器原生支援JSON，就解決了這個問題。JSON格式是JavaScript Object Notation的縮寫。
JSON是一種將物件和字串可以相互表示的資料轉換標準。JSON一直是通過HTTP將物件從瀏覽器傳送到伺服器一種常用格式。現在，可以通過序列化物件將JSON資料儲存在Storage中，以實現複雜資料型別的持久化。
1.var str = JSON.stringify(data)
該引數接受一個引數data,該引數表示要轉換成JSON格式文字資料的物件。這個方法的作用是將物件轉換成JSON格式的文字資料，並將其返回。
2.var str = JSON.parse(str)
該引數接受一個引數str，此引數表示從localStorage中取得的資料，該方法的作用是將傳入的資料轉換成json物件，並且返回。
下面是試例程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<style>
*{
margin: 0;
}
.section{
width: 500px;
margin:0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="section">
<p>
床前明月光
</p>
<p>
疑是地上霜
</p>
<p>
舉頭望明月
</p>
<p>
低頭思故鄉
</p>
<button class="btn big">放大</button>
<button class="btn small">縮小</button>
<button class="btn bgcolor" data-color = "red">紅色</button>
<button class="btn bgcolor" data-color = "green">綠色</button>
<button class="btn bgcolor" data-color = "yellow">黃色</button>
</div>
<script>
$(function(){
var num = localStorage.getItem("bigSize") || 16
var color = localStorage.getItem("fontColor") || "black"
$(".section").css("font-size",num+"px")
$(".section p").css("color",color)
$(".big").click(function(){
num++
// console.log(num)
if(num>20){
return
}
$(".section").css("font-size",num+"px")
localStorage.setItem("bigSize",num)
})
$(".small").click(function(){
num--
if(num<12){
num=12
localStorage.setItem("bigSize",num)
}
$(".section").css("font-size",num+"px")
localStorage.setItem("bigSize",num)
})
$(".bgcolor").click(function(){
var color = $(this).data("color")
// console.log(color)
$(".section p").css("color",color)
localStorage.setItem("fontColor",color)
})
})
</script>
</body>
</html>