html5本地存儲（web Storage）
Hi，和大家又見面了，如果你看過我的第一篇文章，一定知道我這一次要講技術了，那麼今天我們來聊聊h5本地存儲，個人覺得這是h5很不錯的一個功能；當我們在制作網頁時會希望記錄一些資訊，例如使用者登入狀态，計數器或者小遊戲等，但是有不希望用到資料庫，就可以利用web Storage技術将資料存儲在使用者浏覽器中。
web Storage是一種将少量資料存儲在用戶端磁盤的技術。隻要支援webStorageApi規格的浏覽器，網頁設計者都可以使用javaScript來操作它。
web Storage提供兩種方式将資料儲存在用戶端：一種是**localStorage**，另一種是SessionStorage，兩者主要差異在于生命周期和有效範圍：
|web Storage類型 | 生命周期 | 有效範圍|
|localStorage| 執行删除指令才會消失| 同一網站的網頁可以跨視窗和分頁 |
| sessionStorage |浏覽器視窗或分頁（tab）關閉就會消失| 僅對目前浏覽器或視窗或分頁有效 |
個人比較喜歡用localStorage，因為它可以永久儲存在用戶端，很不錯；
為了避免浏覽器不支援web Storage功能，在操作之前，最好先檢測浏覽器是否支援這項功能，文法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webStorage的使用</title>
<script>
if(typeof(Storage)=="undefined"){
alert("您的浏覽器不支援web Storage哦！")
}else{
alert("支援哦！");
}
//localStorage和sessionStorage程式代碼
</script>
</head>
<body>
</body>
</html>
—-接下來詳細介紹localStorage的用法，逐一介紹3種通路localStorage的方法：
1. Storage對象的setItem和getItem方法
存儲使用setItem方法，其格式如下：
window.localStorage.setItem(key,value)；
如将使用者名存儲到localStorage中代碼可以這樣寫:
localStorage.setItem(“userName”,”張三”)
當我們想讀取userdata資料時，則使用getItem方法，格式如下：
localStorage.getItem(“userName”)；
2. 數組索引
存儲文法如下：
window.localStorage[“userName”]=”張三”;
讀取文法如下：
var value=window.localStorage[“userName”];
3.屬性
存儲文法如下：
window.localStorage.userName=”張三”;
讀取文法如下：
var value1=window.localStorage.userName;
一般情況下，用的比較多的是getItem和setItem;
介紹完通路localStorage的方法，下面我們來看看删除localStorage的方法：
要删除某一條localStorage資料，可以調用removeItem方法或者delete屬性進行删除，例如:
window.localStorage.removeItem(“userName”)；
delete window.localStorage.userName;
delete window.localStorage[“userName”]
要想删除localStorage全部資料，可以使用clear()方法
localstorage.clear();
下面以一個完整的例子來介紹：
<!DOCTYPE html>
<html>
<head>
<title>ch05_01</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel=stylesheet type="text/css" href="color.css">
<script type="text/javascript">
function onLoad() {
if (typeof(Storage) == "undefined") {
alert("Sorry!!你的浏覽器不支援Web Storage");
} else {
window.document.getElementById("btn_save").addEventListener("click", saveToLocalStorage);
window.document.getElementById("btn_load").addEventListener("click", loadFromLocalStorage);
window.document.getElementById("find").addEventListener("click", findFromLocalStorage);
window.document.getElementById("clear").addEventListener("click", clearFromLocalStorage);
}
}
//存儲到localStorage
function saveToLocalStorage() {
localStorage.setItem("userName", window.document.getElementById("inputname").value)
localStorage.setItem("pwd", window.document.getElementById("password").value)
}
//從localStorage讀取資料
function loadFromLocalStorage() {
var userName1 = localStorage.getItem("userName");
var pwd1 = localStorage.getItem("pwd");
window.document.getElementById("show_LocalStorage").innerHTML = userName1 + " " + pwd1;
}
//周遊鍵值的方法
function findFromLocalStorage() {
for (var i = localStorage.length - ; i >= ; i--) {
console.log('第' + (i + ) + '條資料的鍵值為：' + localStorage.key(i) + '，資料為：' + localStorage.getItem(localStorage.key(i)));
}
}
//清除localStorage中的資料
function clearFromLocalStorage() {
localStorage.clear();
var userName1 = localStorage.getItem("userName");
var pwd1 = localStorage.getItem("pwd");
window.document.getElementById("show_LocalStorage").innerHTML = userName1 + " " + pwd1;
}
</script>
</head>
<body onload="onLoad()" style="text-align: center">
<input type="text" id="inputname" style="border: none;border-bottom: 1px solid #CCCCCC;" value="" placeholder="請輸入使用者名">
<br/>
<input type="text" id="password" style="border: none;border-bottom: 1px solid #CCCCCC;" value="" placeholder="請輸入密碼">
<div id="show_LocalStorage"></div>
<button id="btn_save">存儲到localStorage</button>
<br/>
<button id="btn_load">從localStorage讀取資料</button>
<br/>
<button id="find">周遊key鍵值的方法</button>
<br/>
<button id="clear">清除localStorage資料</button>
</body>
</html>
接下來通路sessionStorage
sessionStorage隻能儲存在單一的浏覽器視窗或分頁（tab），關閉浏覽器後存儲的資料就消失了，其最大的用途在于儲存一些臨時的資料，防止使用者重新整理網頁時不小心丢失這些資料。sessionStorage的操作方法與localStorage相同；是以，懶懶的我就不解釋了哈,相信聰明的你一定懂得；
關于webStorage就介紹到這裡，嘻嘻！
![移動web開發（一）基礎知識移動端web開發（一）基礎知識[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)