Html5本地儲存和本地資料庫

2022-05-21 21:06:11 字數 2258 閱讀 3904

在html4的時代在瀏覽器端儲存點**個性化的資料,尤其是使用者瀏覽器的痕跡,使用者的相關資料等一般只能儲存在cookie中,但是大多是瀏覽器對於cookie的限制也就逼迫**儲存資料盡量精簡,想儲存複雜的、關係型的使用者資料就根本不可能了。但是進入html5時代,這一切都不叫事...

眾所周知html4時代cookie的大小、格式、儲存資料格式等限制,**應用如果想在瀏覽器端儲存使用者的部分資訊,那麼只能借助於cookie。但是cookie的這些限制,也就導致了cookie只能儲存一些id之類的識別符號等簡單的資料,複雜的資料就更別扯了。

下面是cookie的限制:

1, 大多數瀏覽器支援最大為 4096 位元組的 cookie。

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

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

4, cookie預設情況都會隨著http請求傳送到後台伺服器,但並不是所有請求都需要cookie的,比如:js、css、等請求則不需要cookie。

html5的設計者們,一開始就為html5能成為富客戶端做好了準備。為了破解cookie的一系列限制,html5通過js的新的api就能直接儲存大量的資料到客戶端瀏覽器,而且支援複雜的本地資料庫,讓js簡直就是逆天了。html5支援兩種的webstorage,一種是永久性的本地儲存(localstorage),另外一種是會話級別的本地儲存(sessionstorage)。

在html5中增加了乙個js物件:sessionstorage;通過此物件可以直接操作儲存在瀏覽器中的會話級別的webstorage。儲存在sessionstorage中的資料首先是key-value形式的,另外就是它跟瀏覽器當前會話相關,當會話結束後,資料會自動清除,跟未設定過期時間的cookie類似。

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

對於js的學習和除錯必須得有chrome的除錯工具輔助才能事半功倍。當然chrome也是我最喜愛的web開發輔助工具,非常簡單f12快捷鍵就立即開啟工具了,包括ie也是這個快捷鍵。通過下圖就可以檢視當前瀏覽器中的sessionstorage資料。

在最新的js的api中增加了localstorage物件,以便於使用者儲存永久儲存的web端的資料。而且資料不會隨著http請求傳送到後台伺服器,而且儲存資料的大小機會不用考慮,因為在html5的標準中要求瀏覽器至少要支援到4mb.所以,這完全是顛覆了cookie的限制,為web應用在本地儲存複雜的使用者痕跡資料提供非常方便的技術支援。那接下裡分別介紹一下localstorage的常用的方法,當然基本上跟sessionstorage是一致的。

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

雖然html5已經提供了功能強大的localstorage和sessionstorage,但是他們兩個都只能提供儲存簡單資料結構的資料,對於複雜的web應用的資料卻無能為力。逆天的是html5提供了乙個瀏覽器端的資料庫支援,允許我們直接通js的api在瀏覽器端建立乙個本地的資料庫,而且支援標準的sql的crud操作,讓離線的web應用更加方便的儲存結構化的資料。接下裡介紹一下本地資料的相關api和用法。

操作本地資料庫的最基本的步驟是:

接下來分別介紹一下相關的方法的引數和用法。

(1)opendatabase方法:

//demo:獲取或者建立乙個資料庫,如果資料庫不存在那麼建立之

var database = opendatabase("student", "1.0", "學生表", 1024 * 1024, function () );

opendatabase方法開啟乙個已經存在的資料庫,如果資料庫不存在,它還可以建立資料庫。幾個引數意義分別是:

(2)db.transaction方法可以設定乙個**函式,此函式可以接受乙個引數就是我們開啟的事務的物件。然後通過此物件可以進行執行sql指令碼,跟下面的步驟可以結合起來。

(3)通過executesql方法執行查詢。

ts.executesql(sqlquery,[value1,value2..],datahandler,errorhandler)
引數說明:

下面是乙個綜合的例子,可以看一下:

使用者名稱:

執行的效果如圖:

**:

HTML5本地儲存和本地資料庫

在html4的時代在 瀏覽器端儲存點 個性化的資料,尤其是使用者瀏覽器的痕跡,使用者的相關資料等一般只能儲存在cookie中,但是大多數是瀏覽器對於cookie的限制也就是逼迫 儲存資料盡量精簡,想儲存複雜的 關係型的使用者資料就不可能了。但是進入html5時代,這些就變得不再是問題。下面是cook...

HTML5本地儲存

align center html5本地儲存 align b 1.1概述 b html5 儲存是基於鍵值對的。資料儲存在乙個鍵裡,訪問資料時可以根據同樣的鍵獲得上次儲存的資料。鍵是乙個字串。而資料則可以是任何型別的js基本資料型別,包括字串,boolean,整數,和浮點數。需要注意的是,這些資料在儲...

html5 本地儲存

前言 最近在做專案時遇到了需要將資料儲存在使用者瀏覽器本地的需求,經過查詢了解到了web storage,通過學習初步掌握了web storage,以下是一些關於web storage的知識和用法,記憶力較差發布在csdn備忘。1 什麼是html5本地儲存?通過web storage web應用程式...