導航
【初探HTML5之使用新標簽布局】用html5布局我的博客頁！
【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰才是王道？
【HTML5初探之本地存儲】如果沒有數據庫。。。
【HTML5初探之離線應用】如何打造零請求、無流量的網站？
【HTML5初探之通信API】跨域門檻不再高、數據推送不是夢
【HTML5初探之Web Workers】網頁也能多線程
【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：
將數據保存在客戶端硬件設備上，不管它是什么，意思就是下次打開計算機時候數據還在。
兩者區別就是一個作為臨時保存，一個擁有長期保存。
復制代碼
使用示例
簡單應用
在chrome瀏覽器下看會有感覺的。
簡單web留言板
簡單留言板
更復雜的運用中，可以將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完成的簡單的通訊錄：
通訊錄
結語
對于搞過后端的同學，這章東西其實也是非常簡單的，我再一次涌起了這種想法：
其實HTML5就是HTML4+api接口，目的就是讓我們可以用js做更多事情罷了。
本文轉自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/archive/2013/04/19/3031002.html如需轉載請自行聯系原作者
![ExtJs 備忘錄（4）—— Form表單（四） [ 數據提交 ]](http://pic.xiahunao.cn/ExtJs 備忘錄（4）—— Form表單（四） [ 數據提交 ])
。...)
