1. 程式人生 > >HTML5本地存儲和本地數據庫

HTML5本地存儲和本地數據庫

精簡 ora cut database 用戶數 默認 所有 參考 成功

一個網站如何能在客戶的瀏覽器存儲更多的數據呢?

在HTML4的時代在 瀏覽器端存儲點網站個性化的數據,尤其是用戶瀏覽器的痕跡,用戶的相關數據等一般只能存儲在Cookie中,但是大多數是瀏覽器對於Cookie的限制也就是逼迫網站存儲數據盡量精簡,想存儲復雜的、關系型的用戶數據就不可能了。但是進入HTML5時代,這些就變得不再是問題。。。

下面是cookie的限制:

    1.大多數瀏覽器支持最大為4096字節的Cookie.

    2.瀏覽器還限制站點可以在用戶計算機上存儲的Cookie的數量。大多數瀏覽器只允許每個站點存儲20個Cookie;如果試圖存儲更多Cookie,則最舊的Cookie便會被丟棄。

    3.有些瀏覽器還會對它們將接受的來自所有站點的Cookie總數做出絕對限制,通常為300個。

    4.Cookie默認情況都會隨著http請求發送到後臺服務器,但不是所有請求都需要Cookie的,比如:js、css、圖片等請求則不需要cookie。

HTML5支持兩種的WebStorage,一種是永久性的本地存儲(localStorage),另一種是會話級別的本地存儲(sessionStorage)。

二、會話級別的本地存儲:sessionStorage

  在HTML5中增加了一個Js對象:sessionStorage;通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage.存儲在sessionStorage中的數據首先是Key-Value形式的,另外就是它跟瀏覽器當前會話相關,當會話結束後,數據會自動清除,跟未設置過期的Cookie類似。

 sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

  (1)setItem(key,value):添加本地存儲數據。

  (2)getItem(key):通過key獲取相應的value.

  (3)removeItem(key):通過key刪除本地數據。

  (4)clear():清空數據。

三、永久本地存儲:localStorage

  在最新的JS的API中增加了localStorage對象,以便於用戶存儲 永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後臺服務器,而且存儲數據的大小幾乎不用考慮,因為在HTML5的標準中要求瀏覽器至少要支持到4MB.所以,這完全是顛覆了Cookie的限制,為Web應用在本地存儲復雜的用戶痕跡數據提供了非常方便的技術支持。localStorage的常用方法基本上跟sessionStorage是一致的。

 localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

  (1)setItem(key,value):添加本地存儲數據。

  (2)getItem(key):通過key獲取相應的value.

  (3)removeItem(key):通過key刪除本地數據。

  (4)clear():清空數據。

四、本地數據庫

操作本地數據庫的最基本步驟是:

  第一步:openDatabase方法:創建一個訪問數據庫的對象。

  第二步:使用第一步創建的數據庫訪問對象來執行transaction方法,通過此方法可以設置一個開啟事務成功的事件響應方法,在事件響應方法中可以執行SQL。

  第三步:通過executeSql方法執行查詢,當然查詢可以是:CRUD。

具體詳解參考:http://www.cnblogs.com/fly_dragon/p/3946012.html;

HTML5本地存儲和本地數據庫