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

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

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

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");

用途：清除所有的key/value
用法：.clear()
sessionStorage不是一種持久化存儲，瀏覽器關閉之後會隨之清除。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
indexDB是一種輕量NOSQL資料庫。相較於web sql(sqlite)更有效率，包括索引、事務處理和健壯的查詢功能。

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

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

陳述：

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

上一篇：斷點續傳原理是什麼？怎麼利用html5實作文件斷點續傳下一篇：斷點續傳原理是什麼？怎麼利用html5實作文件斷點續傳

看更多