溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5之離線的應(yīng)用以及存儲的應(yīng)用

發(fā)布時間：2021-02-26 09:57:52 來源：億速云 閱讀：184 作者：清風(fēng) 欄目：web開發(fā)

這篇“HTML5之離線的應(yīng)用以及存儲的應(yīng)用”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML5之離線的應(yīng)用以及存儲的應(yīng)用”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

1.離線應(yīng)用

離線應(yīng)用是 HTML 5 新增的以想功能，旨在幫助用戶在沒有網(wǎng)絡(luò)的情況下，也可以使用 web 應(yīng)用程序。
HTML 5 離線功能，包含【離線資源緩存】、【在線狀態(tài)監(jiān)測】、【本地數(shù)據(jù)存儲】。

  • 離線資源緩存 - 通過瀏覽器機(jī)制，將在線資源緩存到本地，當(dāng)用戶離線訪問應(yīng)用程序時，這些資源文件自動從本地加載，從而讓用戶可以正常的使用應(yīng)用程序。

  • 在線狀態(tài)監(jiān)測 - 有些應(yīng)用需要跟服務(wù)器做一些數(shù)據(jù)的交互，應(yīng)用開發(fā)者需要知道瀏覽器是否處于在線狀態(tài)，HTML 5 提供了在線狀態(tài)監(jiān)測。（window.online = function(){}）

  • 本地數(shù)據(jù)存儲 - 當(dāng)應(yīng)用程序處于離線狀態(tài)時，程序需要把用戶產(chǎn)生的數(shù)據(jù)存儲到本地，以便于在線時同步到服務(wù)器上。為此，HTML 5 提供了多種本地存儲機(jī)制。

離線 web 應(yīng)用對比普通的 web 應(yīng)用，多了一個描述文件，用于列出【需要緩存】和【永不緩存】的資源。該文件擴(kuò)展名為【.appcache】，描述文件的 mime-type 類型為 “text/cache-manifest”。

offline.appcache 文件的代碼如下

CACHE MANIFEST
#cache 之后的資源都會被緩存
CACHE:
main.html
style.css
main.js
#network 之后的資源不會被緩存，總是從線上獲取
NETWORK:
account/

如果離線化應(yīng)用程序，只需將 .html 文件 和 manifest 描述文件關(guān)聯(lián)起來即可

<html manifest="./offline.appcache"></html>

2.LocalStorage（本地存儲） 和 SessionStorage（會話存儲）

cookie 的弊端

  • 大小受限 - 標(biāo)準(zhǔn)瀏覽器下，單個Cookie 的大小為 4kb。

  • 消耗性能 - 當(dāng)前域下的所有 http 請求都會攜帶這些 Cookie 數(shù)據(jù)。

HTML5 的本地存儲為每個網(wǎng)站分配的空間時 【5MB】

LocalStorage 和 SessionStorage 的區(qū)別
前者會一直存儲在本地，直到手動清除；
后者則存活在當(dāng)前頁面的生命周期中，一旦頁面關(guān)閉，存儲的數(shù)據(jù)也會消失。

以上是“HTML5之離線的應(yīng)用以及存儲的應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手