webStorage，離線緩存

時間 2019-11-16

標籤 webstorage 離線緩存简体版

原文原文鏈接

1、webStorage

一、目標

  一、瞭解cookie的不足之處，引入webstorage的概念
  二、學習而且掌握webstorage有哪兩種
  三、學習而且掌握sessionStorage
  四、學習而且掌握localStorage
  五、反覆練習localStorage的用法
  六、掌握離線存儲技術
  七、掌握多媒體標籤的一些基本屬性
  八、自主開發出一個自定義視頻播放器的控件
  九、熟悉使用webwoker
  十、瞭解webSocket的原理javascript

一、HTML5中的本地存儲概念是什麼？

不少時候咱們會存儲用戶本地信息到電腦上，例如：比方說用戶有一個填充了一半的長表格，而後忽然網絡鏈接斷開了，這樣用戶但願你能存儲這些信息到本地，當網絡恢復的時候，他想獲取這些信息而後發送到服務器進行存儲現代瀏覽器擁有的存儲被叫作「LocalStorage」,你能夠存儲這些信息css

二、本地存儲的生命週期是什麼？

本地存儲沒有生命週期，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除html

二、本地存儲和cookies之間的區別

三、webStorage

在H5中webStorage其實就是在web上存儲數據，分爲兩種：

sessionStorage 在瀏覽器關閉時存儲的數據將消失---臨時存儲
localStorage 能夠一直存在 --- 永久存儲

注：webStorage致命的缺點沒有到期時間，

四、webStorage寫法

注：webStorage中存儲的內容全爲字符串

一、儲存：localStorage.setItem(key,value);
    localStorage.key = value;//key、value爲鍵值對形式，key做爲惟一標識，value作位置，不建議使用這一種，可是別不認識
    注：若是key存在時，更新value
  二、獲取數據：localStorage.getItem(key);
    localStorage.key //不建議使用這一種，可是別不認識
    注：若是key不存在返回null
  三、刪除：localStorage.removeItem(key);
    注：一旦刪除，key對應的數據將會所有刪除
  四、所有清除：localStorage.clear();
    注：某些時候使用removeItem逐個刪除太麻煩，可使用clear,執行的後果是會清除全部localStorage對象保存的數據
  五、遍歷localStorage存儲的key
    .length 數據總量，例：localStorage.length
    .key(index) 經過索引獲取key值，從0開始；例：var key=localStorage.key(index);

六、存儲JSON格式數據

與cookie類似，JSON.stringfy 與JSON.parse
七、StorageEvent對象會包含下列的屬性。

window.addEventListener("storage", handle_storage, false);

function handle_storage(e) {
if (!e) { e = window.event; }
}

StorageEvent 對象
屬性	類型	描述
`key`	string	被修改的鍵。
`oldValue`	any	修改前的值（若是是增長新的鍵值，則該屬性爲null）
`newValue`	any	修改後的值（若是是刪除鍵值，則該屬性爲null）
`url`*	string	觸發當前存儲事件的頁面的url
* 注意: `url` 屬性早期的規範中爲uri`屬性。`有些瀏覽器發佈較早，沒有包含這一變動。爲兼容性考慮，使用url屬性前，你應該先檢查它是否存在，若是沒有url屬性，則應該使用uri屬性

要注意一點，在存儲事件的處理函數中是不能取消這個存儲動做的。存儲事件只是瀏覽器在數據變化發生以後給你的一個通知。

總結：若是須要判斷是否支持本地存儲，能夠經過window.sessionStorage或者window.localStorage去判斷。前端

sessionStorage會話結束後即清空，且同一窗口不一樣標籤下的頁面sessionStorage不共用java

dom操做：jquery

五、離線緩存

以appache服務器爲例：

index.html-------

<html lang="zh-hans" manifest="offline.appcache">

注：manifest 設置後全部文件資源都優先走離線緩存，默認離線緩存當前頁面。

第一次從服務器加載離線文件，第二次再讀離線文件所以加載頁面後需再刷新一次頁面

注：fe 前端開發工程師（Front Engineer）

offline.appcache 是在appache中配置mime.types中增長

text/cache-manifest         manifest
text/cache-manifest         appcache

傳圖

建立 offline.appcache 文件，這裏放在index.html同級目錄下

offline.appcache----

CACHE MANIFEST

# v1

#offline.appcache 所引用的頁面默認自動緩存
#這裏通常離線緩存長期不變的內容
CACHE:

../js/jquery-2.0.min.js
../css/bootstrap.css


#頁面其餘其餘資源，*表示除了緩存（CACHE）的資源，其餘資源都走線上
#若不配置，則除CACHE外其餘資源不會被加載
NETWORK:

*

#當服務器掛了（或請求資源不存在時），a連接資源請求失敗了，採用「替補"方式
FALLBACK:

gallery-1.html offline.html

images/ images/offline.png

刪除離線緩存

一、清除瀏覽器緩存記錄中的文件

二、

//在谷歌瀏覽器地址欄輸入
chrome://appcache-internals

一些問題：

由更新機制來講，首次更新manifest時，由於頁面加載已經開始甚至已經完成，緩存更新還沒有完成，瀏覽器仍然會使用過時的資源；瀏覽器是當Application Cache有更新時，該次不會使用新資源，第二次纔會使用。所以在 實際應用中咱們須要在這個時候update事件中執行window.reload事件。詳解（http://developer.51cto.com/art/201502/465095.htm）

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});

由上例能夠知道，緩存的不僅是顯示定義的文件，好比上例中的 applicationcache/時便會默認保存index.html爲映射的數據，而且包含offline.appcache文件，不少時候會遇到一次文件更新線上總是不更新，這個時候隨便在manifest配置文件中作一點修改便可更新。

這個時候若是不作offline.appcache的更新的話，緩存將不會更新，緣由是index.html被緩存了，檢測的仍然是原manifest清單各個頁面統一管理本身的manifest清單，意思是a頁面配置了common.js，b頁面也配置了common.js，意思是a頁面更新後，b頁面的manifest不更改的話，b頁面依舊讀取的是老版本的文件，這個有必定道理卻也有必定浪費，須要公共頁面作處理。

錯誤：Application Cache Error event: Failed to commit new cache to storage, would exceed quota

重啓瀏覽器就行了..

查看瀏覽器版本，手機端或pc端等信息

=> navigator.userAgent

=> "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"

偵測用戶是否在線（網絡是否暢通）

navigation.onLine = true|false

// 監測用戶是否在線
function onlineStatus() {
  if (navigator.onLine) {
    var status = document.getElementById('online-status')
    status.innerHTML = '在線'
    status.className = 'badge success'
  } else {
    status.innerHTML = '離線'
    status.className = 'badge'
  }
}
window.addEventListener('online', onlineStatus, false)
window.addEventListener('offline', onlineStatus, false)

一、應用場景：

a）、離線瀏覽--緩存數據（新聞、閱讀、視頻）
b）、本地保存用戶的操做數據（郵箱軟件----離線編輯、在線發送）web

二、HTML5提供的數據持久化技術：

a）、Application Cache     本地緩存所應用的文件
  b）、WEB SQL     關係型數據庫，經過SQL數據訪問
  c）、IndexDB     索引數據庫chrome

三、Application Cache

a）、Manifest文件
  b）、Application Cache文件
  c）、特色
    Manifest文件必須有變化才更新
    一次必須更新Manifest文件中的全部文件
    下次才生效數據庫

七、webwoker

案例：計算隨機的100個數能被3整除的輸出（原來 webwoker ）

Web Workers 是在HTML5中新增的，用來在web應用程序中實現後臺處理的一種技術
在HTML4中，js建立的程序都是單線程的，若是花費時間比較長的話web界面就會長時間沒有響應，最惡劣的狀況還會跳出一個腳本提示框：提示腳本運行時間過長，是否繼續。。。。因而就引出了本文的主角：Web Workers APIbootstrap

postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息。

onmessage() 方法 - 收數據，數據爲e.data。

如需終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法：

咱們能夠作什麼： 1.能夠加載一個JS進行大量的複雜計算而不掛起主進程，並經過postMessage，onmessage進行通訊 2.能夠在worker中經過importScripts(url)加載另外的腳本文件 3.可使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval() 4.可使用XMLHttpRequest來發送請求 5.能夠訪問navigator的部分屬性有那些侷限性： 1.不能跨域加載JS 2.worker內代碼不能訪問DOM 3.各個瀏覽器對Worker的實現不大一致，例如FF裏容許worker中建立新的worker,而Chrome中就不行 4.不是每一個瀏覽器都支持這個新特性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。