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

前言

大家好呀~ 我是想出去玩的哪吒。

最近关于疫情的好消息越来越多，生活开始回归正轨，大家也逐步进入工作状态了。话不多说，进行学习了。

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

多媒体

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

学习元素的知识点，涉及属性，方法，事件。在HTML5出现前，展示视频，音频，动画等，都是使用第三方自主开发，使用最多的工具是flash了。

现在通过HTML5技术提供的音频视频接口就不用安装插件了。

媒体是对音频和视频一类的总称。

image

1. video元素是用来播放网络上的视频的
2. audio元素是用来播放网络上的音频的

使用audio元素：

使用video元素：

使用source元素：该元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。

顺序从上到下判断自己对该播放格式是否支持，直到找到为止。

参数	描述
src	播放媒体的url地址
type	媒体类型

audio元素和video元素

共有的属性：

参数	描述
src	指定媒体数据的url地址
autoplay	指定媒体是否在页面加载后自动播放
preload	指定视频或音频数据是否预加载
loop	指定是否循环播放视频或者音频
controls	指定是否为视频或者音频添加浏览器自带的播放用的控制条

preload的属性值，none表示为不进行预加载。metadata表示只预加载媒体的元数据。auto表示预加载全部视频或音频。

poster它是video元素独有属性，当视频不可用时，可以使用该元素用图片代替，避免在视频的区域出现一片空白。

width和height为视频的宽度和高度，是video元素独有的属性。

error属性

一般正常情况，video元素或者audio元素的error属性为null。

出现错误时，返回一个MediaError对象，该对象的code返回对于的错误状态值。

image

media_err_aborted，媒体数据的下载过程由于用户的操作原因而被中止。

media_err_network，确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被中止。

media_err_decode，确认媒体资源可用，但是解码时发生错误。

media_err_src_not_supported，媒体格式不被支持。

networkState属性

networkState属性用于读取当前网络的状态。

image

• network_empty为元素处于初始状态
• network_idle为浏览器已经处理好用什么编码格式来播放媒体，但就是未建立网络连接
• network_loading为媒体数据加载中
• network_no_source为没有支持的编码格式，不执行加载

currentSrc属性

currentSrc用来读取播放中的媒体数据的url地址

buffered属性

使用buffered属性，会返回一个对象，该对象实现TimeRanges接口，用来确认是否已缓存媒体数据。

TimeRanges对象表示一段时间范围，，一般情况下，大都是表示时间范围是一个单一的以0开始的范围。

如果浏览器发出Range Requests请求，那么这个TimeRanges对象表示的时间范围是多个时间范围。

在这个对象中，有一个length属性，表示有多少个时间范围。

一般情况下，存在时间范围时，该值为1；不存在时间范围时，该值为0.

image

一般情况下index为0：

1. TimeRanges.start(0)表示当前缓存区内从什么时间开始进行缓存
2. TimeRanges.end(0)表示当前缓存区内从什么时间结束缓存

readyState属性

readyState属性返回媒体当前播放位置的就绪状态。

image

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为非静音状态

方法

都有的四种方法：

image

canPlayType方法

canPlayType方法用来测试浏览器是否支持指定的媒体类型

var support = videoElement.canPlayType(type)

image

事件

对媒体数据进行一系列的事件。

image

第一种：

videoElement.addEventListener(type,listener,useCapture)

video.addEventListener("error", function()
{
    ...
},false);

第二种：

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();

image

image

Window sessionStorage 属性

// 存储
sessionStorage.setItem("lastname", "Jeskson");
// 检索
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

定义和使用

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据

sessionStorage用于临时保存同一窗口的数据，在关闭窗口或标签页之后将会删除这些数据。

如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性

image

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 本地存储

image

什么是Web Storage

随着网络存储，Web应用程序可以在用户的浏览器本地存储数据。

HTML5之前，应用程序数据必须存储在cookie中，包含在每一个服务器的请求。网络存储更安全，以及大量的数据可以在本地存储，而不会影响网站的性能。

web存储是每原点（每个域和协议）。所有页面，从一个起源，可以存储和访问相同的数据。

Web Storage就是在Web上存储数据的功能。

Web Storage功能可以在客户端本地保存数据的Web Storage功能。

cookies存储永久数据存在的问题。

image

Web Storage分两种：

1. sessionStorage，将数据存储在session对象中，就是用户在浏览某个网站时，从进入到浏览器关闭的这段时间，session对象可以用来保存在这段时间内所要求保存的任何数据。
2. localStorage，将数据保存在客户端本地的硬件设备，浏览器关闭后，数据还在，下次重新打开浏览器访问网站时就可以继续使用了。

使用方法

sessionStorage

• 保存数据：sessionStorage.setItem(key,value)
• 读取数据：变量=sessionStorage.getItem(key)

localStorage

• 保存数据：localStorage.setItem(key,value)
• 读取数据：变量=localStorage.getItem(key)

image

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是不能阻止的，这样做就访问不到了。

image

当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。

服务器使用Set-Cookie响应头部向用户代理发送Cookie信息。

image

把不需要存储在服务上的数据，称为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){}

离线应用程序

image

HTML5中提供了一个本地缓存使用的api，可以实现离线web应用程序的开发。

面试官问：什么是离线web应用程序

HTML5离线功能，对离线应用开发的支持就是HTML5中一个新特性。

关于离线的web应用程序，需要了解三个方面的功能：

1. 离线资源缓存
2. 在线状态检测
3. 本地数据存储

什么是离线资源缓存

HTML5 提供一种应用程序缓存机制，使得基于web的应用程序可以离线运行。

image

就是用一种方式表名应用程序在离线工作时所需要的资源文件。这样，当浏览器在在线状态时，就可以把这些文件缓存到本地，往后，当用户在离线状态下，访问应用程序时，这些资源文件就会自动加载，从而让用户正常使用浏览。

在HTML5中，通过使用cache manifest，表明了缓存的资源，并支持自动和手动两种缓存方式。

image

什么是在线检测

开发者需要了解浏览器是否在线，对其进行操作，在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文件是一个简单的文本文件。

image

为了让浏览器能够正常阅读文本文件，需要在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协议最大的特点就是，服务器可以自动向客户端推送消息，客户端也可以主动向服务器发送消息。

image

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.");
}; 

image

image

代码：

// 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 是什么？

image

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()

image

image

一个典型的Websocket握手请求

客户端请求

image

服务器回应

image

小记

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应用程序进行有关操作的。

参阅地址

https://developer.mozilla.org/zh-CN/

https://www.ruanyifeng.com/blog/2017/05/websocket.html