【HTML5初探之本地儲存】如果沒有資料庫。。。

範大腳腳發表於2017-12-07
HTML資料庫
導航
【初探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如需轉載請自行聯絡原作者


相關文章