H5中的web儲存

2021-09-11 12:02:25 字數 1227 閱讀 8178

早期的的儲存通常使用cookie儲存在使用者的客戶端,並隨瀏覽器的請求一起傳送到伺服器的,它有一定的過期時間,過期後自動消失,也制約其發展的因素。

1.html5的web儲存功能是讓網頁在使用者計算機上儲存一些資訊。web儲存又分為兩種:

(1)本地儲存,對應 localstorage 物件。用於長期儲存**的資料,並且站內任何頁面都可以訪問該資料。

(2)會話儲存,對應 sessionstorage 物件。用於臨時儲存針對乙個視窗(或標籤頁)的資料。在訪客關閉視窗或者標籤頁之前,這些資料是存在的,而關閉之後就會被瀏覽器刪除。

2.本地儲存與會話儲存的異同

(1)本地儲存和會話儲存的操作**完全相同,它們的區別僅在於資料的壽命。

(2)本地儲存主要用來儲存訪客將來還能看到的資料。

(3)會話儲存則用於儲存那些需要從乙個頁面傳遞給下乙個頁面的資料。

兩個儲存物件除了儲存時間不同,用法類似,均擁有如下方法:

setitem(key,value) 設定儲存內容

getitem(key) 獲取

removeitem(key) 刪除指定的儲存內容

clear() 清除(清空)

key(index) 通過索引獲取 key

一旦鍵名設定成功,則不允許修改,也不能重複,若重複,會覆蓋原有的鍵名值。

注意:key和value需為字串型別

ps:儘管使用localstorage物件可以將資料長期儲存在客戶端,當在跨瀏覽器讀取資料時,被儲存的資料不可公用,即每乙個瀏覽器只能讀取各自瀏覽器中儲存的資料,不能訪問其他瀏覽器中儲存的資料。

3. 使用json物件儲存資料

上面那種方式儲存資料只能應對少量資料,為了解決這一問題,在html5中可以通過localstorage與json物件的轉換,快速實現儲存更多資料的功能。

如果將localstorage資料轉成json物件,需呼叫json物件的parse()方法:

json.parse(data);

引數data表示localstorage物件獲取的資料,該方法將返回乙個裝載data資料的json物件。還可通過stringify(),將乙個實體物件轉換成json格式的文字資料:

json.stringify(obj)

obj表示乙個任意的實體物件,呼叫該方法將返回乙個由實體物件轉成json格式的文字資料集。

H5高階 儲存

html5程式設計介面 canvas api 拖放api 地理位置api 儲存api 檔案api 通訊api 多執行緒api 離線api 歷史api 選擇元素 queryselector 選擇器 獲取乙個元素 queryselectorall 選擇器 獲取多個元素 監聽事件 addeventlist...

H5離線儲存

首先,我們建立乙個html檔案,類似這樣 network,與fallback,其中network和fallback為可選項,而第一行cache manifest為固定格式,必須寫在前面。cache 必須 標識出哪些檔案需要快取,可以是相對路徑也可以是絕對路徑。例如 aa.css,network 可選...

h5離線儲存 manifest

1 問題分析 html5提出的乙個新的特性 離線儲存。通過離線儲存,我們可以通過把需要離線儲存在本地的檔案列在乙個manifest配置檔案中,這樣即使在離線的情況下,使用者也可以正常看見網頁。2 核心問題講解 這個 不是很常用 就是告訴大家 以後見到要認識 使用 1 在需要離線快取儲存的頁面 加上 ...