前端必學必會-多媒體-本地存儲-瀏覽器與服務器的交互-通訊功能

前言

你們好呀~ 我是想出去玩的哪吒。

最近關於疫情的好消息愈來愈多，生活開始迴歸正軌，你們也逐步進入工做狀態了。話很少說，進行學習了。

下面咱們就來看一看，邀請掘友們的點贊留言。

多媒體

多媒體，你想到了什麼？我想到了video元素和audio元素。

學習元素的知識點，涉及屬性，方法，事件。在HTML5出現前，展現視頻，音頻，動畫等，都是使用第三方自主開發，使用最多的工具是flash了。

如今經過HTML5技術提供的音頻視頻接口就不用安裝插件了。

媒體是對音頻和視頻一類的總稱。

1. video元素是用來播放網絡上的視頻的
2. audio元素是用來播放網絡上的音頻的

使用audio元素：

<audio src="http://test.mp3">
</audio>
複製代碼

使用video元素：

<video width="640" height="360" src="">
</video>
複製代碼

使用source元素：該元素能夠爲同一個媒體數據指定多個播放格式與編碼方式，以確保瀏覽器能夠從中選擇一種本身支持的播放格式進行播放。

<video>
 <source src="test.ogv" type='video/ogg; codecs="theora, vorbis"'>
 <source src="text.mov" type="video/quicktime">
</video>
複製代碼

順序從上到下判斷本身對該播放格式是否支持，直到找到爲止。

參數	描述
src	播放媒體的url地址
type	媒體類型

audio元素和video元素

共有的屬性：

<video src="text.mov" autoplay></video>

參數	描述
src	指定媒體數據的url地址
autoplay	指定媒體是否在頁面加載後自動播放
preload	指定視頻或音頻數據是否預加載
loop	指定是否循環播放視頻或者音頻
controls	指定是否爲視頻或者音頻添加瀏覽器自帶的播放用的控制條

preload的屬性值，none表示爲不進行預加載。metadata表示只預加載媒體的元數據。auto表示預加載所有視頻或音頻。

<video src="" preload="auto"></video>

poster它是video元素獨有屬性，當視頻不可用時，可使用該元素用圖片代替，避免在視頻的區域出現一片空白。

<video src="" poster="image.jpg"></video>

<video src="" autoplay loop></video>

<video src="" controls></video>

width和height爲視頻的寬度和高度，是video元素獨有的屬性。

<video src="" width="500" height="500"></video>

error屬性

通常正常狀況，video元素或者audio元素的error屬性爲null。

出現錯誤時，返回一個MediaError對象，該對象的code返回對於的錯誤狀態值。

media_err_aborted，媒體數據的下載過程因爲用戶的操做緣由而被停止。

media_err_network，確認媒體資源可用，可是在下載時出現網絡錯誤，媒體數據的下載過程被停止。

media_err_decode，確認媒體資源可用，可是解碼時發生錯誤。

media_err_src_not_supported，媒體格式不被支持。

networkState屬性

networkState屬性用於讀取當前網絡的狀態。

• network_empty爲元素處於初始狀態
• network_idle爲瀏覽器已經處理好用什麼編碼格式來播放媒體，但就是未創建網絡鏈接
• network_loading爲媒體數據加載中
• network_no_source爲沒有支持的編碼格式，不執行加載

currentSrc屬性

currentSrc用來讀取播放中的媒體數據的url地址

buffered屬性

使用buffered屬性，會返回一個對象，該對象實現TimeRanges接口，用來確認是否已緩存媒體數據。

TimeRanges對象表示一段時間範圍，，通常狀況下，大都是表示時間範圍是一個單一的以0開始的範圍。

若是瀏覽器發出Range Requests請求，那麼這個TimeRanges對象表示的時間範圍是多個時間範圍。

在這個對象中，有一個length屬性，表示有多少個時間範圍。

通常狀況下，存在時間範圍時，該值爲1；不存在時間範圍時，該值爲0.

通常狀況下index爲0：

1. TimeRanges.start(0)表示當前緩存區內從什麼時間開始進行緩存
2. TimeRanges.end(0)表示當前緩存區內從什麼時間結束緩存

readyState屬性

readyState屬性返回媒體當前播放位置的就緒狀態。

1. have_nothing表示沒有獲取到媒體的信息，當前播放位置沒有可播放的數據。
2. have_metadata表示已有獲取到足夠的媒體數據，可是當前播放位置沒有有效的媒體數據。
3. have_current_data表示已有播放的數據，可是沒有讓播放器前進的數據。就是視頻有當前幀的數據，卻沒有下一幀的數據，或已經是最後一幀。
4. have_future_data表示當前有播放的數據，也有播放前進的數據的數據，當最後播放一幀時，readyState屬性不可能爲have_future_data。
5. have_enough_data表示當前有播放的數據，也有前進的數據，保證了後續有足夠的數據進行播放。

seeking屬性和seekable屬性

seeking屬性返回一個布爾值：

1. true表示瀏覽器正在請求數據
2. false表示瀏覽器已經中止請求

seekable屬性返回一個TimeRanges對象，該對象表示請求到的數據的時間範圍。

1. 開始時間：請求到數據的第一幀的時間
2. 結束時間：請求到數據的最後一幀的時間

currentTime屬性，startTime屬性，duration屬性

currentTime屬性用來修改當前播放位置，以及讀取媒體的當前播放位置。

startTime屬性來讀取媒體播放的開始時間，一般爲0。

duration屬性用來讀取媒體文件總的播放時間。

played屬性，paused屬性，ended屬性

played屬性返回一個TimeRanges對象，表示讀取媒體文件的已播放部分的時間段。

1. 開始時間爲已播放的開始時間
2. 結束時間爲已播放的結束時間

paused屬性返回一個布爾值，表示是否處於暫停播放

1. true表示暫停播放
2. false表示正在播放

defaultPlaybackRate屬性與playbackRate屬性

defaultPlaybackRate屬性讀取或修改媒體默認的播放速率

playbackRate屬性讀取或修改媒體當前的播放速率。

volume屬性和muted屬性

volume屬性：讀取或修改媒體的播放音量，值0到1

muted屬性讀取或修改媒體的靜音狀態，值爲布爾值

1. true爲靜音狀態
2. false爲非靜音狀態

方法

都有的四種方法：

canPlayType方法

canPlayType方法用來測試瀏覽器是否支持指定的媒體類型

var support = videoElement.canPlayType(type)

事件

對媒體數據進行一系列的事件。

第一種：

videoElement.addEventListener(type,listener,useCapture)

video.addEventListener("error", function()
{
    ...
},false);
複製代碼

第二種：

<video id="video1" src="" onplay=「begin();」></video>
function begin()
{
    ...
}
複製代碼

事件方法

事件	描述
loadstart	瀏覽器開始找媒體數據
progress	瀏覽器正在獲取媒體數據
suspend	瀏覽器暫停獲取媒體數據，但下載過程並無結束
abort	停止獲取媒體數據，並非由錯誤引發的
error	獲取媒體數據過程當中出錯
emptied	所在網絡變爲未初始化狀態：1,載入媒體過程當中出現錯誤;2,在瀏覽器選擇支持的播放格式時，又調用了load方法
stalled	瀏覽器嘗試獲取媒體數據失敗
play	播放
pause	播放暫停
loadedmetadata	瀏覽器獲取完畢媒體的時間長和字節數
loadeddata	瀏覽器已加載完畢當前播放的媒體數據
waiting	播放過程因爲獲取不到下一幀就暫停播放，可是很快就恢復了，又能獲得下一幀
playing	正在播放
canplay	可以播放，播放的速率不可以直接將媒體播放完畢，播放期間須要緩衝
canplaythrough	可以播放，播放速率也能夠，因此不用進行緩衝
seeking	爲true時，表示正在請求數據
seeked	爲false時，表示中止請求數據
timeupdate	表示當前播放位置被改變
ended	播放結束後中止播放
ratechange	defaultplaybackRate屬性或playbackRate屬性被改變
durationchange	播放時長被改變
volumechange	音量，volume屬性被改變或靜音狀態muted屬性被改變

本地存儲

web Storage與本地數據庫

HTML5中的兩個重要內容：Web Storage與本地數據庫。

Web Storage存儲機制是對HTML4中cookies存儲機制的一個改良，HTML5轉試用改良後的Web Storage存儲機制。

本地數據庫是hmtl5中新增的一個功能，能夠保存在客戶端本地創建一個數據庫。---大大減輕了服務器端的負擔，加快了訪問數據的速度。

• 瞭解sessionStorage和localStorage，以及二者之間的區別
• openDatabase方法建立與打開數據庫
• transaction方法進行事務的處理

sessionStorage

sessionStorage 屬性容許你訪問一個 session Storage 對象。它與 localStorage 類似，不一樣在於 localStorage 裏面存儲的數據沒有過時時間設置，而存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。

頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話。

在新標籤或窗口打開一個頁面時會複製頂級瀏覽會話的上下文做爲新會話的上下文，這點和 session cookies 的運行方式不一樣。

語法

// 保存數據到 sessionStorage
sessionStorage.setItem('key', 'value');

// 從 sessionStorage 獲取數據
let data = sessionStorage.getItem('key');

// 從 sessionStorage 刪除保存的數據
sessionStorage.removeItem('key');

// 從 sessionStorage 刪除全部保存的數據
sessionStorage.clear();
複製代碼

Window sessionStorage 屬性

// 存儲
sessionStorage.setItem("lastname", "Jeskson");
// 檢索
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
複製代碼

定義和使用

localStorage 和 sessionStorage 屬性容許在瀏覽器中存儲 key/value 對的數據

sessionStorage用於臨時保存同一窗口的數據，在關閉窗口或標籤頁以後將會刪除這些數據。

若是你想在瀏覽器窗口關閉後還保留數據，可使用 localStorage 屬性

localStorage

只讀的localStorage 屬性容許你訪問一個Document 源的對象 Storage；存儲的數據將保存在瀏覽器會話中。

存儲在 localStorage的數據能夠長期保留；當頁面被關閉時，存儲在 sessionStorage 的數據會被清除 。

// 存儲
localStorage.setItem("lastname", "Jeskson");
// 檢索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
複製代碼

在瀏覽器的API有兩個：

• localStorage
• sessionStorage

存在於window對象中：

1. localStorage對應window.localStorage
2. sessionStorage對應window.sessionStorage

localStorage 的優點

1. localStorage 拓展了 cookie 的 4K 限制。

localStorage 將第一次請求的數據直接存儲到本地，至關於一個 5M 大小的數據庫，相比於 cookie 能夠節約帶寬，這個只有在高版本的瀏覽器中才支持的。

localStorage 的侷限

瀏覽器的大小不統一，而且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。

目前的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在咱們平常比較常見的JSON對象類型須要一些轉換。

localStorage在瀏覽器的隱私模式下面是不可讀取的。

• localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡。
• localStorage不能被爬蟲抓取到。

localStorage 使用

使用 localStorage，我須要判斷瀏覽器是否支持 localStorage：

if(! window.localStorage){
    alert("瀏覽器不支持localstorage");
    return false;
}else{
    //主邏輯業務
}
複製代碼

特別說明一下

localStorage 使用也是遵循同源策略的，不一樣的網站是不能共用相同的 localStorage。

localStorage 只支持 string 類型的存儲。

通常咱們會將 JSON 存入 localStorage 中，在 localStorage 會自動將 localStorage 轉換成爲字符串形式。

使用 JSON.stringify() 這個方法，將 JSON 轉換爲 JSON 字符串。讀取以後要將 JSON 字符串轉換成爲 JSON 對象，使用 JSON.parse() 方法。

HTML5 LocalStorage 本地存儲

什麼是Web Storage

隨着網絡存儲，Web應用程序能夠在用戶的瀏覽器本地存儲數據。

HTML5以前，應用程序數據必須存儲在cookie中，包含在每個服務器的請求。網絡存儲更安全，以及大量的數據能夠在本地存儲，而不會影響網站的性能。

web存儲是每原點（每一個域和協議）。全部頁面，從一個起源，能夠存儲和訪問相同的數據。

Web Storage就是在Web上存儲數據的功能。

Web Storage功能能夠在客戶端本地保存數據的Web Storage功能。

cookies存儲永久數據存在的問題。

Web Storage分兩種：

1. sessionStorage，將數據存儲在session對象中，就是用戶在瀏覽某個網站時，從進入到瀏覽器關閉的這段時間，session對象能夠用來保存在這段時間內所要求保存的任何數據。
2. localStorage，將數據保存在客戶端本地的硬件設備，瀏覽器關閉後，數據還在，下次從新打開瀏覽器訪問網站時就能夠繼續使用了。

使用方法

sessionStorage

• 保存數據：sessionStorage.setItem(key,value)
• 讀取數據：變量=sessionStorage.getItem(key)

localStorage

• 保存數據：localStorage.setItem(key,value)
• 讀取數據：變量=localStorage.getItem(key)

Web Storage 包含以下兩種機制

sessionStorage，localStorage

Web Storage 接口

Storage

容許你在一個特定域中設置，檢索和刪除數據和儲存類型

Window

Web Storage API 繼承於Window 對象,並提供兩個新屬性

• Window.sessionStorage
• Window.localStorage

它們分別地提供對當前域的會話和本地Storage 對象的訪問。

StorageEvent

當一個存儲區更改時，存儲事件從文檔的 Window 對象上被髮布。

• saveStorage函數
• loadStorage函數
• clearStorage函數

將對象轉換成json格式的文本數據，使用json對象的stringify方法。

var str=JSON.stringify(data);

將從localStorage中獲取的數據轉換成JSON對象。

var data = JSON.parse(str);

簡單數據庫腳本代碼：

function saveStorage()
{
    var data=new Object;
    data.name=document.getElementById('name').value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name, str);
}
function findStorage(id)
{
    var find = document.getElementById('find').value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);
    var result = data.name;
    var target = document.getElementById(id);
    target.innerHTML = result;
}
複製代碼

cookie （儲存在用戶本地終端上的數據）

Cookie是保存在客戶端的純文本文件。好比txt文件。

客戶端就是咱們本身的本地電腦。當咱們經過瀏覽器進行訪問網頁的時候，服務器會生成一個證書並返回給個人瀏覽器並寫入咱們的本地電腦。

這個證書是cookie。通常來講，cookie都是服務器端寫入客戶端的純文本文件。

Cookie 文件由瀏覽器的支持，在瀏覽器中能夠設置阻止cookie。這樣服務器端就不能寫入cookie到客戶端了。

通常來講，cookie是不能阻止的，這樣作就訪問不到了。

當服務器收到HTTP請求時，服務器能夠在響應頭裏面添加一個Set-Cookie選項。

服務器使用Set-Cookie響應頭部向用戶代理髮送Cookie信息。

把不須要存儲在服務上的數據，稱爲SQLLite的文件型SQL數據庫。

使用SQLLite數據庫

1. 建立訪問數據庫的對象
2. 使用事務處理

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

返回建立後的數據庫訪問對象。如數據庫不存在，就建立該數據庫。

參數	描述
第一個參數	數據庫名
第二個參數	版本號
第三個參數	數據庫的描述
第四個參數	數據庫的大小

調用transaction方法，用來執行事務處理。

transaction方法：

db.transaction(function(tx){
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(id unique,Log)');  
})
複製代碼

用executeSql來執行查詢語句

executeSql方法：

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

參數	描述
第一個參數	須要執行的sql語句
第二個參數	須要sql語句中所使用到的參數的數組
第三個參數	執行sql語句成功時調用的回調函數
第四個參數	執行sql語句出錯時調用的回調函數

代碼：

// 第二個參數
transaction.executeSql('UPDATE people set age=? where name=?;', [age,name]);

// 第三個參數
function dataHandler(transaction,results){}

// 第四個參數
function errorHandler(transaction, errmsg){}
複製代碼

離線應用程序

HTML5中提供了一個本地緩存使用的api，能夠實現離線web應用程序的開發。

面試官問：什麼是離線web應用程序

HTML5離線功能，對離線應用開發的支持就是HTML5中一個新特性。

關於離線的web應用程序，須要瞭解三個方面的功能：

1. 離線資源緩存
2. 在線狀態檢測
3. 本地數據存儲

什麼是離線資源緩存

HTML5 提供一種應用程序緩存機制，使得基於web的應用程序能夠離線運行。

就是用一種方式表名應用程序在離線工做時所須要的資源文件。這樣，當瀏覽器在在線狀態時，就能夠把這些文件緩存到本地，日後，當用戶在離線狀態下，訪問應用程序時，這些資源文件就會自動加載，從而讓用戶正常使用瀏覽。

在HTML5中，經過使用cache manifest，代表了緩存的資源，並支持自動和手動兩種緩存方式。

什麼是在線檢測

開發者須要瞭解瀏覽器是否在線，對其進行操做，在HTML5中，提供了檢測當前網絡是否在線的方式。

什麼是本地數據緩存

離線時，將數據存儲到本地，爲了知足須要，HTML5提供了DOM Storage 和 Web SQL Database 兩種存儲機制。

HTML5的 DOM Storage機制提供了一種方式讓程序員可以把信息存儲到本地的計算機上，在須要時獲取。

DOM Storage 兩個分類

DOM Storage 分爲 sessionStorage 和 localStorage。

本地緩存與瀏覽器網頁緩存的區別

1. 本地緩存是爲整個web應用程序服務的，而瀏覽器的網頁緩存是爲單個網頁服務的。
2. 任何網頁都具備網頁緩存，而本地緩存只有那些用戶指定緩存的網頁。
3. 網頁緩存不是安全的，不可靠，也不知道它到底緩存了哪些網頁，哪些資源。
4. 本地緩存是可靠的，能夠控制對哪些內容進行緩存，不對哪些內容進行緩存。

面試官問：什麼是manifest文件

web應用程序的本地緩存是經過每一個頁面的manifest文件來管理的。manifest文件是一個簡單的文本文件。

爲了讓瀏覽器可以正常閱讀文本文件，須要在web應用程序頁面上的html標籤的manifest屬性中指定manifest文件的url地址。

面試官問：什麼是applicationCache對象

applicationCache對象表明了本地緩存，用它能夠通知用戶本地緩存已經被更新。

代碼：

applicationCache.onUpdateReady = function(){
    // 本地緩存已被更新，通知用戶
    alert()
};
複製代碼

瀏覽器與服務器的交互

過程：

1. 瀏覽器請求訪問地址
2. 服務器返回index.html網頁
3. 瀏覽器解析index.html網頁，請求網頁上的全部 資源文件
4. 服務器返回全部資源文件
5. 瀏覽器處理manifest文件，請求mnifest中全部要求本地緩存的文件。
6. 服務器返回全部要求本地緩存的文件。
7. 瀏覽器對本地緩存進行更新，通知本地緩存被更新。

swapCache方法

本地緩存準備被更新，該方法用來手工執行本地緩存更新。

使用前提

在applicationCache對象的updateReady事件被觸發調用，updateReady事件只有在服務器上的manifest文件被更新，在manifest文件中所要求的資源文件下載到本地後。

代碼：

applicationCache.onUpdateReady = function() {
    // 本地緩存已被更新，通知用戶
    alert();
    applicationCache.swapCache();
}
複製代碼

跨文檔消息傳輸

什麼是同源，所謂"同源"指的是"三個相同"。

1. 協議相同
2. 域名相同
3. 端口相同

同源的目的是爲了保證用戶信息的安全，防止惡意的網站竊取數據。所謂「同域限制」是指一樣協議、一樣域名、一樣端口的地址進行通訊。

使用跨文檔消息傳輸功能，能夠在不一樣網頁文檔，不一樣端口，不一樣域之間進行消息的傳遞。

對窗口對象的message事件進行監視。

代碼：

window.addEventListener("message", function(){...},false);
複製代碼

使用window對象的postMessage方法向其餘窗口發送消息。

otherWindow.postMessage(message, targetOrigin);

參數	描述
第一個參數	所發送的消息文本
第二個參數	接收消息的對象窗口的url地址

Web Sockets通訊

web sockets是html5提供的在web應用程序中客戶端與服務端之間進行的非http的通訊機制。

有了HTTP協議，爲何須要另外一個協議。

由於HTTP協議有一個缺陷，通訊只能由客戶端發起。（客戶端向服務器發出請求，服務器返回查詢結果。）

WebSocket協議最大的特色就是，服務器能夠自動向客戶端推送消息，客戶端也能夠主動向服務器發送消息。

WebSocket 對象做爲一個構造函數，用於新建 WebSocket 實例。

實例對象的onopen屬性，指定鏈接成功後的回調函數。

代碼：

ws.onopen = function () {
  ws.send('Hello Server!');
}
複製代碼

使用addEventListener方法

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});
複製代碼

代碼，客戶端的簡單示例：

var ws = new WebSocket("wss://index.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  // 實例對象的send()方法用於向服務器發送數據。
  ws.send("Hello WebSockets!");
};
// 實例對象的onmessage屬性，用於指定收到服務器數據後的回調函數
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

// 實例對象的onclose屬性，用於指定鏈接關閉後的回調函數
ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 
複製代碼

代碼：

// When the connection is open, send some data to the server
// 實例對象的onopen屬性，用於指定鏈接成功後的回調函數。
connection.onopen = function () {
// 實例對象的send()方法用於向服務器發送數據。
  connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
// 實例對象的onerror屬性，用於指定報錯時的回調函數。
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
// 實例對象的onmessage屬性，用於指定收到服務器數據後的回調函數。
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};
複製代碼

WebSocket 是什麼？

WebSocket 是一種網絡通訊協議。

代碼：

var webSocket = new WebSocket("");
複製代碼

url字符串必須以ws或者wss（加密通訊時）文字做爲開頭。

使用WebSocket對象的send方法對服務器發送數據，只能發送文本數據。

代碼：

webSocket.send("data");
複製代碼

經過獲取onmessage事件句柄來接收服務器傳過來的數據：

代碼：

webSocket.onmessage = function(event){
    var data = event.data;
}
複製代碼

經過獲取onopen事件句柄來監聽socket的打開事件：

代碼：

webSocket.onopen = function(event){
   // 開始通訊時的處理
}
複製代碼

經過獲取onclose事件句柄來監聽socket的關閉事件：

代碼：

webSocket.onclose = function(event) {
    // 開始通訊時的處理
};
複製代碼

經過close方法來關閉socket，切斷通訊鏈接。

webSocket.close()

一個典型的Websocket握手請求

客戶端請求

服務器迴應

小記

1. Service Worker和cacheStorage緩存及離線開發
2. 緩存和離線開發
3. 通俗易懂的方式介紹Service Worker
4. 瞭解JS中的全局對象window.self和全局做用域self
5. 瞭解Cache和CacheStorage
6. 藉助Service Worker和cacheStorage離線開發的固定套路
7. 和PWA技術的關係
8. 離線web應用程序，當客戶端本地與web應用程序的服務器沒有創建鏈接時，也是能正常在客戶端本地使用該web應用程序進行有關操做的。

參閱地址

developer.mozilla.org/zh-CN/

www.ruanyifeng.com/blog/2017/0…

最後

歡迎加我微信Jeskson(xiaoda0423)，拉你進技術羣（掘金-前端高校），長期交流學習。