HTML&CSS3(4)

网络状态检测API

1.1 网络状态检测API

在原生APP中,比如QQ,它可以检测QQ是处于在线还是离线状态,但是在网页中,或者早期web app中,没有 检测网络状态的能力,因此在HTML5中出现了网络状态检测API

1.2 网站状态检测事件

1.online 在线
window.addEventListener(‘online’,function(){})

2.offline 离线
window.addEventListener(‘offline’,function(){})

注意: 网络状态检测检测网络状态变化的瞬间的情况
网络状态检测的是正常情况(wifi,局域网)

多媒体API(音频 视频)

2.1 语法

属性 描述
currentTime(读写) 当前播放的时间,单位秒
duration(只读) 返回媒体的播放总时长,单位秒
paused(只读) 是否暂停
volume(读写) 音量值(0-1 最大值为1)
muted(读写) 是否静音
事件 描述
canplay 当浏览器可以开始播放该音视频时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
方法 描述
play() 控制视频开始播放
pause() 控制视频暂停

客户端存储

3.1 WebStorage介绍

所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,比如在网站上自动登陆这些功能,其实就是把一些少量的数据存储在浏览器等客户端中,这样可以减少没必要的请求到服务器,降低服务器的压力,给用户提供更好的体验.

3.2 WebStorage的三种存储方式(重点)

cookie: 广泛使用 存储量4kb左右 会在浏览器和服务器间传递 一般由服务器端创建 可以设置存储时间(默认和session一样) cookie不容易操作 jquery.cookie.js插件

session(会话)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(浏览器的内存中) 只会由浏览器端创建 存储时间是打开浏览器开始关闭浏览器消失 方法简洁明了 容易操作

local(本地)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(存储在硬盘中) 只会由浏览器端创建 永久存储除非手动删除 方法简介明了 容易操作

3.3 localStorage

添加数据: window.localStorage.setItem(key,value);
获取数据: window.localStorage.getItem(key);
移除数据: window.localStorage.removeItem(key);
清除数据: window.localStorage.clear();
获取key: window.localStorage.key(n);

应用场景: 网页换肤 京东购物车

3.4 sessionStorage

添加数据: window.sessionStorage.setItem(key,value);
获取数据: window.sessionStorage.getItem(key);
移除数据: window.sessionStorage.removeItem(key);
清除数据: window.sessionStorage.clear();
获取key: window.sessionStorage.key(n从0开始);

应用场景: 存储一些少量临时的数据(比较少用)