web存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案
Storage 存储
1 | window.sessionStorage(浏览器存储) |
1 | window.localStorage(本地存储) |
(向本地保存数据,有可能在浏览器内存里面,有可能在硬盘上面.)
特性
1、设置、读取方便
2、容量较大,sessionStorage约5M、localStorage约20M
3、只能存储字符串,可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
window.localStorage
1、永久生效,除非手动删除
2、可以多窗口共享
方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
案例:记住用户名
其它
WebSQL、IndexDB
已经被w3c 放弃了..
生命周期差异,存储空间差异
WebSQL、IndexDB
sessionStorage
1 | <!DOCTYPE html> |
localStorage
1 | <!DOCTYPE html> |
地理定位
在HTML规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service)
1、IP地址
2、三维坐标
GPS(Global Positioning System,全球定位系统)
目前世界上在用或在建的第2代全球卫星导航系统(GNSS)有:1.美国 Global Positioning System (全球定位系统) 简称GPS;.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM (全球卫星导航系统)简称GLONASS(格洛纳斯);3.欧盟(欧洲是不准确的说法,包括中国在内的诸多国家也参与其中)Galileo satellite navigation system(伽利略卫星导航系统) 简称GALILEO(伽利略);4.中国 BeiDou(COMPASS) Navigation Satellite System(北斗卫星导航系统)简称 BDS ;5.日本 Quasi-Zenith Satellite System (准天顶卫星系统) 简称QZSS ;印度 India Regional Navigation Satellite System(印度区域卫星导航系统)简称IRNSS;以上6个系统中国都能使用。
Wi-Fi
手机信号
3、用户自定义数据
如下图对不同获取方式的优缺点进行了比较,浏览器会自动以最优方式去获取用户地理信息。
HTML5 Geolocation(地理位置定位)规范提供了一套保护用户隐私的机制。必须先得到用户明确许可,才能获取用户的位置信息
navigator.getCurrentPosition\(successCallback, errorCallback, options\)
获取当前地理信息
navigator.watchPosition\(successCallback, errorCallback, options\)
重复获取当前地理信息
1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude
纬度
position.coords.longitude
经度
2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error
3、可选参数options对象可以调整位置信息数据收集方式
百度地图
网络状态
我们可以通过window.onLine
来检测,用户当前的网络状况,返回一个布尔值window.online
用户网络连接时被调用window.offline
用户网络断开时被调用
1 | <script> |
应用程序缓存
优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源,提升访问速度,增强用户体验
4、减少请求,缓解服务器负担
缓存清单
一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest=”demo.appcache”,路径要保证正确。
manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料
其他
1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源,必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时,自动由另外一个资源替换.
CACHE MANIFEST
CACHE:
此部分是需要缓存的资源
1.jpg
js/jquery.min.js
NETWORK:
js/demo.js
1 | # 可以使用 * 好替代 |
3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存
1 | <<!DOCTYPE html> |
1 | <!DOCTYPE html> |
01.appcache文件
1 | CACHE MANIFEST |
02.appcache
1 | CACHE MANIFEST |
全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。requestFullscreen()
开启全屏显示cancleFullscreen()
关闭全屏显示
不同浏览器需要添加前缀如:webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通过document.fullScreen
检测当前是否处于全屏
不同浏览器需要添加前缀document.webkitIsFullScreen、document.mozFullScreen
全屏伪类
1 | :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {} |
智能表单
伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,所以HTML5在Web表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理更加高效。
一起来了解HTML5表单的新增的特性,以及PC和移动设备间的差异,其兼容性较差
输入类型 (表单类型,表单元素,表单属性,表单事件.)
email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
–datetime 时间日期
month 月份
week 星期
部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
表单元素(标签)
1 | <datalist> 数据列表 |
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键, 一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。(SSH)
1 | <output> 不可当做数据提交? |
1 | Max-width |
表单属性
placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成,用于表单元素,也可用于表单自身(on/off)
form 指定表单项属于哪个form,处理复杂表单时会需要
novalidate 关闭验证,可用于
表单事件
oninput
用户输入内容时触发,可用于移动端输入字数统计oninvalid
验证不通过时触发
多媒体
在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件
一起来了解如何通过HTML5播放音频/视频,以及针对不同浏览器所支持的格式,做多浏览器兼容处理
音频
HTML5通过<audio>
标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放,如:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效
由于版权等原因,不同的浏览器可支持播放的格式是不一样的
视频
HTML5通过<video>
标签来解决音频播放的问题。
同样,通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载,同时设置了autoplay,此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因,不同的浏览器可支持播放的格式是不一样的