首頁 >web前端 >H5教程 >HTML5應用:離線的應用以及儲存的應用

HTML5應用:離線的應用以及儲存的應用

不言
不言原創
2018-08-08 09:53:002148瀏覽

這篇文章帶給大家的內容是關於HTML5應用:離線的應用程式以及儲存的應用,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

1.離線應用程式

離線應用程式是HTML 5 新增的以想功能,旨在幫助使用者在沒有網路的情況下,也可以使用web 應用程式.
HTML 5 離線功能,包含【離線資源快取】、【線上狀態監控】、【本地資料儲存】。

  • 離線資源快取- 透過瀏覽器機制,將線上資源快取到本機,當使用者離線存取應用程式時,這些資源檔案會自動從本地加載,讓使用者可以正常的使用應用程式。

  • 線上狀態監控 - 有些應用程式需要跟伺服器做一些資料的交互,應用程式開發者需要知道瀏覽器是否處於線上狀態,HTML 5 提供了線上狀態監控。 (window.online = function(){})

  • 本地資料儲存- 當應用程式處於離線狀態時,程式需要將使用者產生的資料儲存到本地,以便於線上時同步到伺服器上。為此,HTML 5 提供了多種本機儲存機制。

離線 web 應用比較普通的 web 應用,多了一個描述文件,用於列出【需要快取】和【永不緩存】的資源。該檔案副檔名為【.appcache】,描述檔的 mime-type 類型為 “text/cache-manifest”。

offline.appcache 檔案的程式碼如下

CACHE MANIFEST
#cache 之后的资源都会被缓存
CACHE:
main.html
style.css
main.js
#network 之后的资源不会被缓存,总是从线上获取
NETWORK:
account/

如果離線化應用程序,只需將.html 檔案和manifest 描述檔關聯起來即可

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

2.LocalStorage(本機儲存) 和SessionStorage(會話儲存)

cookie 的弊端

  • 大小受限- 標準瀏覽器下,單一Cookie 的大小為4kb。

  • 消耗效能 - 目前網域下的所有 http 請求都會攜帶這些 Cookie 資料。

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

LocalStorage 和SessionStorage 的差異
前者會一直儲存在本地,直到手動清除;
後者則存活在目前頁面的生命週期中,一旦頁面關閉,儲存的資料也會消失。

相關文章推薦:

link標籤連結CSS和@import載入有什麼差別?

html5 canvas用來繪製弧形的程式碼實作

#Html5中postmessage實作子父視窗傳值的程式碼

以上是HTML5應用:離線的應用以及儲存的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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