首頁 >web前端 >H5教程 >html5幾種在客戶端儲存資料的實例詳解

html5幾種在客戶端儲存資料的實例詳解

伊谢尔伦
伊谢尔伦原創
2017-05-30 10:40:482341瀏覽

1.Application Cache

HTML5引入應用程式緩存,表示web應用程式可以進行緩存,即使在沒有網路的情況下也能使用。

application cache有三個特點

  • #離線瀏覽

  • 已快取的資源載入速度更快

  • 減少伺服器負載,瀏覽器只會從伺服器下載更新或更改過的資源

使用方法就是在html標籤中新增一個manifest屬性

每個指定了manifest 的頁面在使用者對其存取時都會被快取。如果未指定 manifest 屬性,則頁面不會被快取(除非在 manifest 檔案中直接指定了該頁面)。

manifest 檔案的建議的檔案副檔名是:".appcache"。


<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
   The content of the document......
</body>
</html>

manifest 文件是簡單的文字文件,它告知瀏覽器被快取的內容(以及不快取的內容)。

manifest 檔案可分為三個部分:

  • CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取

  • #NETWORK - 在此標題下列出的檔案需要與伺服器的連接,且不會被快取

  • #FALLBACK - 在此標題下列出的檔案規定當頁面無法存取時的回退頁面(例如404 頁)

一個完整的manifest檔


CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

2.localStorage & sessionStorage

HTML5 提供了兩種在用戶端儲存資料的新方法:

  • localStorage - 沒有時間限制的資料儲存







##sessionStorage - 針對一個session 的資料儲存

之前,這些都是由cookie 完成的。但是 cookie 不適合大量資料的存儲,因為它們由每個對伺服器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。

localStorage和sessionStorage都具有相同的操作方法,例如setItem()、getItem()和removeItem()等

localStorage和sessionStorage的方法:

setItem儲存value
用途:將value儲存到key欄位

用法:.setItem( key, value)

程式碼範例:


sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem取得value#使用:取得指定key本機儲存的值

用法:.getItem(key)程式碼範例:

#
var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

removeItem刪除key

用途:刪除指定key本機儲存的值

用法:.removeItem(key)

程式碼範例:
  • #
    sessionStorage.removeItem("key"); 
    localStorage.removeItem("site");
  • clear清除所有的key/value
  • 用途:清除所有的key/value

    用法:.clear()

  • sessionStorage不是一種持久化存儲,瀏覽器關閉之後會隨之清除。而localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

  • 3.indexDB
  • indexDB是一種輕量NOSQL資料庫。相較於web sql(sqlite)更有效率,包括索引、事務處理和健壯的查詢功能。

  • 它的特色包括:
#########一個網站可能有一個或多個 IndexedDB 資料庫,每個資料庫必須有惟一的名稱。 ############一個資料庫可包含一個或多個物件儲存。一個物件儲存(由一個名稱惟一標識)是一個記錄集合。每個記錄有一個鍵 和一個值。該值是一個對象,可擁有一個或多個屬性。鍵可能基於某個鍵生成器,從一個鍵路徑衍生出來,或者是明確設定。一個鍵生成器自動產生惟一的連續正整數。鍵路徑定義了鍵值的路徑。它可以是單一 JavaScript 標識符或多個由句點分隔的標識符。 (有點像列資料庫的特色)############IndexedDB中,幾乎所有的操作都是採用了command->request->result的方式。例如查詢一條記錄,回傳一個request,在request的result中得到查詢結果。又例如開啟資料庫,回傳一個request,在request的result中得到回傳的資料庫引用。 ############indexedDB需要放到web伺服器才可以運作。 ##########

以上是html5幾種在客戶端儲存資料的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn