HTML5的離線存儲有哪些？

TML5提供了一些離線存儲的功能，用于在離線狀態下緩存應用程序的資源和數據。
以下是HTML5中常用的離線存儲技術：

1：Application Cache（應用程序緩存）：

Application Cache允許你定義一個緩存清單文件（Manifest），列出需要在離線狀態下緩存的文件。瀏覽器會根據清單文件緩存這些文件，使得應用程序可以在離線狀態下繼續訪問。Application Cache已被廢棄，推薦使用Service Worker替代。

2：Service Worker（服務工作器）：

Service Worker是一種在瀏覽器后臺運行的腳本，可以攔截和處理網絡請求。它可以用于緩存應用程序的資源，包括HTML文件、CSS、JavaScript、圖像等。通過使用Service Worker，應用程序可以在離線狀態下加載緩存的資源，提供離線訪問的能力。

3：IndexedDB（索引數據庫）：

IndexedDB是一種客戶端數據庫，可以在瀏覽器中存儲大量結構化數據。它提供了一個異步的API，用于存儲和檢索數據。應用程序可以使用IndexedDB在本地存儲數據，以便在離線狀態下訪問和操作數據。

4：Web Storage（Web存儲）：

Web Storage包括兩種機制：localStorage和sessionStorage。它們都允許應用程序在瀏覽器中存儲數據。localStorage用于持久保存數據，即使瀏覽器關閉后也會保留數據；sessionStorage用于臨時保存數據，當會話結束或瀏覽器關閉后數據將被清除。

HTML5以前我們會使用 cookie，在瀏覽器端緩存一些數據，例如：登錄用戶信息，歷史搜索信息等等。但是cookie所支持的容量僅僅只有 4k ，也沒有專門的api來操作，只能依賴一些開源的庫，這里使用 cookies.js 存儲和獲取cookie信息

// 這是一個cookie值Cookies.set('key', 'value');// 鏈式調用Cookies.set('key', 'value').set('hello', 'world');// 可以額外設置一些參數Cookies.set('key', 'value', { domain: 'www.example.com', secure: true });// 設置緩存時間Cookies.set('key', 'value', { expires: 600 }); // Expires in 10 minutesCookies.set('key', 'value', { expires: '01/01/2012' });

由此可見用cookie存儲有一下幾個缺點:

存儲數據的量比較小

本身沒有方便的api對其進行操作

cookie信息會在http請求時加入到請求頭中，既不安全也增加了帶寬。

WEB Storage

HTML5 提拱更好的本地存儲規范 localStorage 和 sessionStorage , 它們將數據存儲在本地，而且在http請求時不會攜帶 Storage 里的信息, 使用方式也很簡單:

localStorage.setItem('key', 'value');

除此之外，

canvas 是 HTML5 提供的一個用于展示繪圖效果的標簽. canvas 原意畫布, 帆布. 在 HTML 頁面中用于展示繪圖效果. 最早 canvas 是蘋果提出的一個方案, 今天已經在大多數瀏覽器中實現.

canvas 英 ['k?nv?s] 美 ['k?nv?s] 帆布畫布

canvas 的基本用法

基本語法

1. 使用 canvas 標簽, 即可在頁面中開辟一格區域. 可以設置其 width 和 height 設置該區域的尺寸.

2. 默認 canvas 的寬高為 300 和 150.

3. 不要使用 CSS 的方式設置寬高, 應該使用 HTML 屬性.

4. 如果瀏覽器不支持 canvas 標簽, 那么就會將其解釋為 div 標簽. 因此常常在 canvas 中嵌入文本, 以提示用戶瀏覽器的能力.

5. canvas 的兼容性非常強, 只要支持該標簽的, 基本功能都一樣, 因此不用考慮兼容性問題.

6. canvas 本身不能繪圖. 是使用 JavaScript 來完成繪圖. canvas 對象提供了各種繪圖用的api.

靈活處理圖片標題

<figcaption> 標簽表示與 <figure> 元素關聯的標題或圖例，通常作為例如圖片、圖表、插圖等視覺元素的容器。在早期的 HTML 版本中，<figcaption> 只能用作第一個或最后一個 <figure> 的子標簽。HTML5.1 已放寬此限制，現在您可以在 <figure> 容器中的任何位置使用 <figcaption>。

<article>
<h1>The Headline of todays news </h1>
<figure>
<img src="petrolimage.jpeg"alt="Petrol price drops">
<figcaption>Aman fueling up his car at petrol station</figcaption>
</figure>
<p>Thisisthe forth hike inpetrol prices intwo month andthe third incaseof diesel inone fortnight.</p>
</article>

12. 拼寫檢查

spellcheck 是一個取值可以為空字符串、true 和 false 的枚舉屬性。如果指定其狀態為 true，就表示元素將會接受對其的拼寫和語法檢查。

element.forceSpellCheck() 將強制用戶代理在文本元素上報告檢查出來的拼寫和語法錯誤，即使用戶從來沒將輸入聚焦在該元素上。

<pspellcheck="true">
<label>Name: <input spellcheck=" false"id="textbox"></label>
</p>

.在用戶沒有與因特網連接時，可以正常訪問站點或應用。

2.在用戶與因特網連接時，更新用戶機器上的緩存文件。

原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。

如何使用：

一、頁面頭部像下面一樣加入一個manifest的屬性；

二、在cache.manifest文件的編寫離線存儲的資源；

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

離線存儲的manifest一般由三個部分組成:

1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。

2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說CACHE的優先級更高。

3.FALLBACK:表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問offline.html

三、在離線狀態時，操作window.applicationCache進行需求實現。

在線咨詢

上一篇：深度學習自動前端開發：從草圖到HTML只需5秒
下一篇：什么是 HTML？前端入門基礎教程，帶您全面認識HTML

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。