前端必学必会-多媒体-本地存储-浏览器与服务器的交互-通讯功能

前言

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

最近关于疫情的好消息愈来愈多，生活开始回归正轨，你们也逐步进入工做状态了。话很少说，进行学习了。

下面咱们就来看一看，邀请掘友们的点赞留言。

多媒体

多媒体，你想到了什么？我想到了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)，拉你进技术群（掘金-前端高校），长期交流学习。