導航
【初探HTML5之使用新標簽布局】用html5布局我的博客頁！
【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰才是王道？
【HTML5初探之通信API】跨域門檻不再高、數據推送不是夢
【HTML5初探之Geolocation API】讓我們來回去地理信息
前言
本章主要內容是Web Storage與本地數據庫，其中Web Storage 是對cookie的優化，本地數據庫是HTML5新增的一個功能，使用它可以在客戶端建立一個數據庫
大大減輕服務器端的負擔，加快訪問數據速度。
學習本章需要掌握Web Storage基本概念，了解sessionStorage與localStorage的使用與差別
掌握本地數據庫的使用
什么是WebStorage？
前面說過，webstorage是對cookie的優化而來，HTML4中使用cookie在客戶端存儲用戶數據，長期使用發現存在以下問題：
大小限制在4kb
cookie每次隨HTTP事務一起發送，浪費帶寬
正確操作cookie很復雜（這個有待考慮）
由於以上問題，HTML5提出WebStorage作為新的客戶端本地保存技術。
Web Storage 技術在web上存儲數據即針對客戶端本地；具體來說分為兩種：
sessionStrage：
session即會話的意思，在這里的session是指用戶瀏覽某個網站時，從進入網站到關閉網站這個時間段，session對象的有效期就只有這么長。
localStorage：
將數據保存在客戶端硬件設備上，不管它是什么，意思就是下次打開計算機時候數據還在。
兩者區別就是一個作為臨時保存，一個擁有長期保存。
使用示例
簡單應用
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <h1> 8 Web Storage 實驗</h1> 9 <div id="msg" style=" margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;"> 10 </div> 11 <input type="text" id="text" /> 12 <select id="type"> 13 <option value="session">sessionStorage</option> 14 <option value="local">localStorage</option> 15 </select> 16 <button onclick="save();"> 17 保存數據</button> 18 <button onclick="load();"> 19 讀取數據</button> 20 <script type="text/javascript"> 21 var msg = document.getElementById('msg'), 22 text = document.getElementById('text'), 23 type = document.getElementById('type'); 24 25 function save() { 26 var str = text.value; 27 var t = type.value; 28 if (t == 'session') { 29 sessionStorage.setItem('msg', str); 30 } else { 31 localStorage.setItem('msg', str); 32 } 33 } 34 35 function load() { 36 var t = type.value; 37 if (t == 'session') { 38 msg.innerHTML = sessionStorage.getItem('msg'); 39 } else { 40 msg.innerHTML = localStorage.getItem('msg'); 41 } 42 } 43 44 </script> 45 </body> 46 </html>
在chrome瀏覽器下看會有感覺的。
簡單web留言板
簡單留言板
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <h1> 8 Web Storage 實驗</h1> 9 <div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; 10 min-height: 100px;"> 11 </div> 12 <input type="text" id="text" /> 13 <button onclick="save();"> 14 留言</button> 15 <button onclick="_clear();"> 16 清空</button> 17 <script type="text/javascript"> 18 var msg = document.getElementById('msg'), 19 text = document.getElementById('text'); 20 21 function save() { 22 var str = text.value; 23 var k = new Date().getTime(); 24 localStorage.setItem(k, str); 25 init(); 26 } 27 28 function init() { 29 msg.innerHTML = ''; 30 var dom = ''; 31 for (var i = 0, len = localStorage.length; i < len; i++) { 32 dom += '<div>' + localStorage.key(i) + ':' + localStorage.getItem(localStorage.key(i)) + '</div>' 33 } 34 msg.innerHTML = dom; 35 } 36 37 function _clear() { 38 msg.innerHTML = ''; 39 localStorage.clear(); 40 } 41 42 </script> 43 </body> 44 </html>
更復雜的運用中，可以將value值用作json字符串，以此達到用作數據表的目的；
本地數據庫
在HTML5中內置了一個可通過sql訪問的數據庫（新瀏覽器果真強大啊！），所以在HTML4中數據只能存在服務器端，HTML5則改變了這一原則。
這種不需要存儲在服務器的專有名詞為“SQLLite”（我終於知道他是干什么的了）
使用SQLLite數據庫，需要兩個必要步驟：
創建數據庫訪問對象
使用事務處理
創建對象：
openDatabase(dbName, version, dbDesc, size)
實際訪問：
db.transaction(function () {
tx.excuteSql('create table ......');
});
數據查詢：
excuteSql(sql, [], dataHandler, errorHandler)//后面兩個為回調函數；[]估計是做sql注入處理
光說不練假把式，我們來實際操作一番，使用數據庫實現web通訊錄（左思右想還是用上了jQuery）：
做的時候居然發現我的FF不支持本地數據庫！！！以下是用chrome完成的簡單的通訊錄：
通訊錄
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style> 6 span{ cursor: pointer;} 7 </style> 8 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(document).ready(function () { 11 var search = $('#search'); 12 var btSearch = $('#btSearch'); 13 14 var phoneBook = $('#phoneBook'); 15 var name = $('#name'); 16 var phone = $('#phone'); 17 var add = $('#add'); 18 19 //開始程序 20 var db = openDatabase('phoneBook', '', 'my', 102400); 21 22 init(); 23 24 add.click(function () { 25 save(name.val(), phone.val()); 26 }); 27 btSearch.click(function () { 28 init(search.val()) 29 }); 30 $('#phoneBook span').click(function () { 31 deleteByName($(this).attr('name')); 32 s = ''; 33 }); 34 35 36 //初始化界面 37 function init(name) { 38 db.transaction(function (tx) { 39 tx.executeSql('create table if not exists phoneBook(name text, phone text)', []); 40 var sql = 'select * from phoneBook where 1=1'; 41 var param = []; 42 if (name) { 43 sql += ' and name=? '; 44 param.push(name); 45 } 46 tx.executeSql(sql, param, function (tx, rs) { 47 phoneBook.html(''); 48 for (var i = 0, len = rs.rows.length; i < len; i++) { 49 var data = rs.rows.item(i); 50 showData(data); 51 } 52 }); 53 }); 54 } 55 56 function showData(data) { 57 var str = '<div>姓名：' + data.name + '；電話：' + data.phone + ' <span onclick="del(\'' + data.name + '\')" >刪除</span></div>'; 58 phoneBook.append($(str)); 59 } 60 61 //刪除數據 62 function deleteByName(name) { 63 db.transaction(function (tx) { 64 tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) { 65 init(); 66 }) 67 }); 68 } 69 window.del = deleteByName; 70 //增加 71 function save(name, phone) { 72 db.transaction(function (tx) { 73 tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) { 74 var d = {}; 75 d.name = name; 76 d.phone = phone; 77 showData(d); 78 }) 79 }); 80 } 81 82 }); 83 84 </script> 85 </head> 86 <body> 87 <h1> 88 本地數據庫實現web通訊錄</h1> 89 <input type="text" id="search" placeholder="聯系人姓名" /> 90 <button id="btSearch"> 91 搜索</button> 92 93 <div id="phoneBook"> 94 </div> 95 <hr /> 96 姓名：<input type="text" id="name" /><br /> 97 手機：<input type="text" id="phone" /><br /> 98 <button id="add"> 99 添加到通訊錄</button> 100 </body> 101 </html>
結語
對於搞過后端的同學，這章東西其實也是非常簡單的，我再一次涌起了這種想法：
其實HTML5就是HTML4+api接口，目的就是讓我們可以用js做更多事情罷了。