HTML5本地 離線 快取 儲存 資料庫 檔案

2021-06-26 03:21:47 字數 1943 閱讀 1040

、本地快取離線快取、離線儲存、離線應用)

應用可以向瀏覽器指定需要快取的檔案,使得離線

manifest 檔案(快取清單)是簡單的文字檔案,它告知瀏覽器被快取的內容以及不快取的內容。

manifest 檔案可分為四個部分:

1、cache manifest,指定需要快取的資源

cache manifest

/theme.css

/logo.gif

/main.js

2、network,指定不快取的檔案,可以用星號來表示其他所有資源

network:

login.asp            

network:

*3、fallback,指定如果無法建立網際網路連線,則用 "offline.html" 替代 /html5/ 目錄中的所有檔案,用 offline.js 替代 online.js

fallback:

/html5/ /404.html

online.js  offline.js

4、注釋,以#號開頭的行

二、使用manifest 檔案

指定了 manifest ,則 瀏覽器預設的檔案快取規則(200 from cache)不再生效。

三、更新manifest 檔案

快取清單上的檔案一旦被快取,瀏覽器會持續使用已快取的版本,即使伺服器上的對應的檔案已經修改。為了讓瀏覽器更新快取,需要更新 manifest 檔案,如修改一行注釋。

web storage(web 儲存、dom儲存)

一、localstorage(本地儲存)

本地儲存類似於cookie,也是鍵值對。window.localstorage

是全域性物件,改變localstorage

物件的內容,即改變了本地儲存的內容。本地儲存除非清空,否則永久有效。

儲存資料:localstorage.key="value"; 或localstorage.setitem(key,value);

讀取資料:localstorage.key

或localstorage.getitem(key);

刪除單個資料:localstorage.removeitem(key);

刪除所有資料:localstorage.clear();

二、sessionstorage(會話儲存)

會話儲存也是鍵值對。window.

sessionstorage

是全域性物件,改變sessionstorage

物件的內容,即改變了會話儲存的內容。使用者關閉瀏覽器視窗後,資料會被刪除。對資料的操作和本地儲存一樣。

本地資料庫

一、web sql database

本地的sql資料庫。

二、indexeddb

本地的nosql資料庫。

本地檔案

一、file api

二、file system api

操作本地檔案系統

cookie

讀取cookie: document.cookie

寫cookie:document.cookie="key=value;max-age=3;path=/;domain=***.com;secure",這只是設定乙個字段,對其他字段不會有影響

為了讓cookie可以在子網域名稱之間共享,可以把cookie設定為.頂級網域名稱

HTML5離線儲存和本地快取

一.離線儲存 有乙個web應用有三個檔案index.html,a.js,b.css,現在需要把js和css檔案快取起來 1.在index.html裡加上 2.manifest清單格式如下 cache manifest 上面一句必須 v1.0.0 需要快取的檔案 cache a.js b.css 不需...

webview支援html5本地快取

最近開發遇到網頁瀏覽器開啟perfect 但是換成webview就不行了,還以為是前端的錯誤,報了一大堆什麼找不到,js什麼什麼的,直接就扔給前端解決了。i chromium at f.instance http x js angular.1.4.0.min.js 2 5169 此時webview的...

HTML5 本地資料庫

html5大大豐富了客戶端本地可以儲存的內容,新增了很多功能將原本必須要儲存在伺服器上的資料轉為儲存在客戶端本地,從而大大提高了web應用程式效能,減輕了伺服器的負擔,使用web時代重新回到了 客戶端為重 伺服器端為輕 的時代。在html5中,可以像訪問本地檔案那樣輕鬆地對內建資料庫進行直接訪問。h...