HTML5的兩種簡單的存儲方式

時間 2019-11-21

標籤 html5 html 兩種簡單存儲方式欄目 HTML5 简体版

原文原文鏈接

1.Application Cache

HTML5引入應用緩存，意味着web應用能夠進行緩存，即便在沒有網絡的狀況下也能使用。css

application cache有三個特色html

每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。html5

manifest 文件的建議的文件擴展名是：".appcache"。web

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。sql

manifest 文件可分爲三個部分：數據庫

一個完整的manifest文件瀏覽器

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

HTML5 提供了兩種在客戶端存儲數據的新方法：緩存

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。服務器

localStorage和sessionStorage都具備相同的操做方法，例如setItem()、getItem()和removeItem()等
localStorage和sessionStorage的方法：cookie

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用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

indexDB是一種輕量級NOSQL數據庫。相比web sql(sqlite)更加高效，包括索引、事務處理和健壯的查詢功能。

它的特色包括：

一個網站可能有一個或多個 IndexedDB 數據庫，每一個數據庫必須具備唯一的名稱。
一個數據庫可包含一個或多個對象存儲。一個對象存儲（由一個名稱唯一標識）是一個記錄集合。每一個記錄有一個鍵和一個值。該值是一個對象，可擁有一個或多個屬性。鍵可能基於某個鍵生成器，從一個鍵路徑衍生出來，或者是顯式設置。一個鍵生成器自動生成唯一的連續正整數。鍵路徑定義了鍵值的路徑。它能夠是單個 JavaScript 標識符或多個由句點分隔的標識符。(有點像列數據庫的特色)
IndexedDB中，幾乎全部的操做都是採用了command->request->result的方式。好比查詢一條記錄，返回一個request，在request的result中獲得查詢結果。又好比打開數據庫，返回一個request，在request的result中獲得返回的數據庫引用。
indexedDB須要放到web服務器上才能夠運行。

indexDB參考資料：

http://www.myexception.cn/nosql/1973758.html

文檔地址

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API