在上篇的文章中我們看過了Html5中拖動API，本篇文章中會就HTML5中的Web Storage、本地數據庫進行一些簡單的介紹。
Web Storage
在Html4時代，如果我們需要把數據存在客戶端，我們想到的就是Cookie。但是Cookie本來就有很多不好的地方，比如Cookie的里面存儲的大小只能是4kb;每次請求時都會將Cookie信息包含在請求信息中，增加了額外的帶寬。在Html5中，提供了sessionStorage跟localStorage來進行本地數據的存儲。
- sessionStorage：數據的存儲只在特定的會話中，數據只會保留到瀏覽器關閉之前，適合保存臨時數據；
- localStorage:存儲在本地硬盤上面，持久化存在，適合保存長時間數據。
sessionStorage、localStorage支持的方法：
| 方法名 | 作用 |
| setItem(key,value) | 保存數據 |
| getItem(key) | 獲取數據 |
| removeItem(key) | 提出健值 |
| clear | 清除數據 |
WebStorage Demo
下面做個簡單的Demo，從一個輸入框中獲取值保存到sessionStorage中，然后讀取出來顯示。
HTML:
<body> <div id="msg"></div> <input type="text" id="input" /> <input type="button" value="Save Data" onclick="saveData('input')" /> <input type="button" value="Get Data" onclick="getData('msg')" /> </body>
Javascript:
function saveData(id) { var txt = document.getElementById(id); sessionStorage.setItem('data',txt.value); } function getData(id) { var msg = document.getElementById(id); msg.innerHTML = sessionStorage.getItem('data'); }
運行效果：
Web Sql DataBase
在Html5中同時提供了一個可以通過SQL語言來訪問的本地數據庫，我們可以輕松的進行訪問。在使用Web Sql DataBase時，我們主要需要兩個步驟：
- 創建或則打開數據庫；
- 創建事務，通過事物執行SQL。
創建數據庫,我們通過openDataBase方法創建一個訪問數據庫對象：
var db = openDatabase('MyData', '', 'My Data', 404800);
創建完成數據庫之后我們可以通過數據的事物來創建表、讀寫數據。
創建表：
db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT, time INTEGER)', []); });
寫入數據：
tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)', [name, msg, new Date().getTime()], function (tx, rs) { alert('Add data successful!'); }, function (tx, error) { alert(error.source + ":" + error.message); });
在上面的方法中我們看到兩個回掉函數，第一個回調函數的表示執行SQL成功后的回調，第二個回掉函數是執行失敗的回調函數。在我們執行查詢時，查詢成功之后，結果會放在rs里面。
這里面我們做一個Demo，一個留言板的Demo，將數據存入Web Sql DataBase里面。具體代碼這里就不貼出來，代碼在我的Git里面的WebSqlDataBase查看。通過Chrome瀏覽器，我們可以看到數據庫里面的數據：
其中MyData為Demo中建立的數據庫，MsgData為表名，右側的則是增加的記錄。
總結
在本篇Post中，我們看過了WebStorage跟WebSqlDataBase，通過這個功能其實為我們做Web Appliction提供很大的幫助。（WebStorage代碼地址在此）。