HTML5 中Web儲存問題

2022-08-20 17:21:10 字數 1993 閱讀 3044

html5 web 儲存,乙個比cookie更好的本地儲存方式。注意:internet explorer 7 及更早ie版本不支援web 儲存.

使用html5可以在本地儲存使用者的瀏覽資料。

早些時候,本地儲存使用的是 cookie。但是web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上,但是這些資料只用於使用者請求**資料上.它也可以儲存大量的資料,而不影響**的效能.

資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。

客戶端儲存資料的兩個物件為:

在使用 web 儲存前,應檢查瀏覽器是否支援 localstorage 和sessionstorage:

if(typeof(storage)!=="undefined")

else

localstorage 物件儲存的資料沒有時間限制。第二天、第二週或下一年之後,資料依然可用。

localstorage.sitename="";

例項解析:

以上例項也可以這麼寫:

//儲存

localstorage.sitename = "";

//查詢

document.getelementbyid("result").innerhtml = localstorage.sitename;

移除 localstorage 中的 "lastname" :

localstorage.removeitem("lastname");

不管是 localstorage,還是 sessionstorage,可使用的api都相同,常用的有如下幾個(以localstorage為例):

下面的例項展示了使用者點選按鈕的次數。

**中的字串值轉換為數字型別:

if

(localstorage.clickcount)

else

document.getelementbyid("result").innerhtml=" 你已經點選了按鈕 " + localstorage.clickcount + " 次 ";

sessionstorage 方法針對乙個 session 進行資料儲存。當使用者關閉瀏覽器視窗後,資料會被刪除。

如何建立並訪問乙個 sessionstorage::

if

(sessionstorage.clickcount)

else

document.getelementbyid("result").innerhtml="在這個會話中你已經點選了該按鈕 " + sessionstorage.clickcount + " 次 ";

列出當前已儲存的所有**;

以下**用於儲存於查詢資料:

for="sitename">**名(key):

for="siteurl">網 址(value):

for="search_phone">輸入**名:

以上例項只是演示了簡單的 localstorage 儲存與查詢,更多情況下我們儲存的資料會更複雜。

接下來我們將使用 json.stringify 來儲存物件資料, json.stringify 可以將物件轉換為字串。

var site = new

object;

...var str = json.stringify(site); //

將物件轉換為字串

之後我們使用 json.pase 方法將字串轉換為 json 物件:

var site = json.parse(str);

for="keyname">別名(key):

for="sitename">**名:

for="siteurl">網 址:

for="search_phone">輸入別名(key):

html5中web儲存方式

瀏覽器 客戶端 訪問伺服器端的時候,攜帶的資料,之前這些資料儲存在cookie中,但是cookie儲存的資料大小有限 html5的web儲存分為 localstorage儲存 sessionstorage儲存 他們的區別在於 localstorage 儲存在客戶端,大小沒有限制,時間也沒有限制 se...

html5中的web儲存

html5中的web儲存就是sessionstorage和localstorage,使用非常非常簡單 localstorage.fry videojs playbackrate this.playbackrate sessionstorage 關閉瀏覽器視窗 容量大小約為5m左右,該方式的生命週期為...

HTML5 儲存 離線web應用

cookie儲存 每次http請求都會傳送cookie資訊,會使web變慢 每次http請求的cookie資訊不加密傳輸,不安全 cookie資訊量最大不能超過4kb 檢測瀏覽器是否支援該特性 function supports html5 storage html5儲存是基於鍵值對的 方法 set...