HTML5本地存儲

什么是Web Storage

Web Storage是HTML5里面引入的一個類似于cookie的本地存儲功能，可以用于客戶端的本地存儲，其相對于cookie來說有以下幾點優勢：

1. 存儲空間大：cookie只有4KB的存儲空間，而Web Storage在官方建議中為每個網站5M。

2. 可選擇性強：Web Storage分為兩種：sessionStorage和localStorage

Web Storage的使用方法

在使用上，session Storage和local Storage大同小異，只是session Storage是將數據臨時存儲在session中，瀏覽器關閉，數據隨之消失。而local Storage則是將數據存儲在本地，理論上來說數據永遠不會消失，除非人為刪除。

API：

• 保存數據 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

• 讀取數據 localStorage.getItem( key ); sessionStorage.getItem( key );

• 刪除單個數據localStorage.removeItem( key ); sessionStorage.removeItem( key );

• 刪除全部數據localStorage.clear( ); sessionStorage.clear( );

• 獲取索引的keylocalStorage.key( index ); sessionStorage.key( index );

注意：Web Storage的API只能操作字符串

---

在使用Web Storage之前，我們需要注意以下幾點：

1. 僅支持支持IE8及以上版本

2. 由于只能對字符串類型數據進行操作，所以對一些JSON對象需要進行轉換

3. 因為是明文存儲，所以毫無隱私性可言，絕對不能用于存儲重要信息

4. 會是瀏覽器加載速度在一定程度上變慢

5. 無法被爬蟲程序爬取

6. 使用Web Storage之前，請加上以下代碼，對瀏覽器對Web Storage的支持性進行判斷

   if(window.localStorage){//或者window.sessionStorage     alert("瀏覽器支持localStorage") //主邏輯業務 }else{ alert("瀏覽不支持localStorage") //替代方法 } 

我們來寫一個學生管理小程序用于演示Web Storage的基本用法

簡單的html頁面先準備好

    <div style="border: 2px dashed #ccc;width:320px;float: left;">     <label for="name">學生姓名:</label> <input type="text" id="name" name="name"/> <br/> <label for="sex">性別:</label> <input type="text" id="sex" name="sex"/> <br/> <label for="num">學號:</label> <input type="text" id="num" name="num"/> <br/> <label for="add">家庭住址:</label> <input type="text" id="add" name="add"/> <br/> <label for="tel">電話號碼:</label> <input type="text" id="tel" name="tel"/> <br/> <input type="button" onclick="save()" value="提交信息"/> <hr/> <input type="button" onclick="loadAll()" value="查看所有"/> <hr/> <label for="search_name">輸入姓名：</label> <input type="text" id="search_name" name="search_name"/> <br/> <input type="button" onclick="search()" value="查詢"/> <hr/> <label for="del_name">輸入姓名：</label> <input type="text" id="del_name" name="del_name"/> <br/> <input type="button" onclick="del()" value="刪除"/> <hr/> </div> <br/> <div id="list"></div> <div id="tato"></div>

在這個程序里面我們將實現增刪查的基本功能，修改數據的功能相信大家看完后自己就能寫出來。

接下來開始寫方法：

存儲

//利用localStorage存儲數據
function save() { var contact = new Object(); var Name = document.getElementById("name").value; var Sex = document.getElementById("sex").value; var Num = document.getElementById("num").value; var Add = document.getElementById("add").value; var Tel = document.getElementById("tel").value; if(JTrim(Name) != "" && JTrim(Sex) != "" && JTrim(Num) != "" && JTrim(Add) != "" && JTrim(Tel) != "") { contact.name = Name; contact.sex = Sex; contact.num = Num; contact.add = Add; contact.tel = Tel; var str = JSON.stringify(contact);//對JSON對象進行處理，用于從一個對象解析出字符串 if(window.localStorage) { localStorage.setItem(contact.name,str); } else { alert("您暫時還無法使用本功能"); return; } } else { alert("請輸入內容"); } }

其中用到了Trim()這個方法，用于判斷輸入是否為空

function JTrim(s) { return s.replace(/(^\s*)|(\s*$)/g, ""); } 

展示所有信息

function loadAll() { var resource = document.getElementById("list"); if(window.localStorage) { var result = "<table border = '1'>"; result += "<tr><td>姓名</td><td>性別</td><td>學號</td><td>家庭住址</td><td>電話號碼</td></tr>"; for(var i = 0;i < localStorage.length; i++) { var Name = localStorage.key(i);//用于得到索引的key，在這個程序里，key為name var str = localStorage.getItem(Name); var contact = JSON.parse(str);//對JSON對象進行處理，用于從一個字符串中解析出JSON對象 result += "<tr><td>"+contact.name+"</td><td>"+contact.sex+"</td><td>"+contact.num+"</td><td>"+contact.add+"</td><td>"+contact.tel+"</td></tr>"; } result += "</table>"; resource.innerHTML = result; } else { alert("您暫時還無法使用本功能"); return; } }

查詢

function search() { var resource = document.getElementById("tato"); var search_name = document.getElementById("search_name").value; if(window.localStorage) { var str = localStorage.getItem(search_name); if(str != null) { var result = "<table border = '1'>"; result += "<tr><td>姓名</td><td>性別</td><td>學號</td><td>家庭住址</td><td>電話號碼</td></tr>"; var contact = JSON.parse(str); result += "<tr><td>"+contact.name+"</td><td>"+contact.sex+"</td><td>"+contact.num+"</td><td>"+contact.add+"</td><td>"+contact.tel+"</td></tr>"; result += "</table>"; resource.innerHTML = result; } else { alert("系統無此人"); return; } } else { alert("您暫時還無法使用本功能"); return; } }

刪除

function del() { var del_name = document.getElementById("del_name").value; if(window.localStorage) { var result = localStorage.getItem(del_name); localStorage.removeItem(del_name); if(result != null) { alert("刪除成功"); } else { alert("系統無此人"); return; } } else { alert("您暫時還無法使用本功能"); return; } }

在這里如果想對所有數據做刪除處理則只需將localStorage.removeItem();換成localStorage.clear();即可