HTML5 新增 API-白红宇

HTML5 新增 API

阅读量：3947 次

发布时间：2019-05-24

本文共 4652 字，大约阅读时间需要 15 分钟。

HTML5 新增 API

1. 选择器 API

querySelector 方法获取满足第一个条件的 DOM 元素

querySelectorAll 方法获取满足条件的所有 DOM 元素

支持复杂选择器的查找方式

2. 历史对象 API

History 对象包含用户（在浏览器窗口中）访问过的 URL，能够让一个页面具有历史状态

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问

通过 pushState 方法添加历史状态

当调用历史对象的前进后退方法时触发 window 对象的 popstate 事件，可以在事件中获取历史状态的数据

属性方法	描述
length	返回浏览器历史列表中的 URL 数量
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

history.pushState('历史状态的数据','标题',url)// 标题目前浏览器不支持// url 建议采用 "?参数=值" 的形式

功能描述
- 点击左侧的列表项，右侧区域显示对应的内容
- 点击后退箭头，能回退历史浏览记录

注意点
- Ajax 执行数据请求的时候，是没有历史记录的
- 现在需要作出历史记录

      
       历史对象API

3. 新增 Web 存储 API

3.1 Web 存储 API 类型

localStorage 存储

sessionStorage 存储

离线缓存

其他

3.2 本地存储 localStorage

localStorage 采用键值配对保存数据，用于持久化的本地存储

localStorage 的容量大小约为 5M

浏览器的支持不一致，建议加上兼容性语法

保存的数据值类型为string，JSON对象需要进行类型转换
- JSON.stringify()
- JSON.parse()

本地数据未加密，且持久存在，安全性差

3.2.1 localStorage 属性方法

属性方法	描述
length	存储数据对象的个数
key(index)	获取 index 对应的键
setItem(key, value)	键值存储的方法
getItem(key)	获取存储数据的方法
removeItem(key)	删除指定数据的方法
clear()	清除所有存储数据的方法

3.2.2 localStorage 存储数据

本地存储保存与读取数据

// 保存数据到本地存储localStorage.setItem('stuName','tom')// 从本地存储中读取数据alert(localStorage.getItem('stuName'))

在这里插入图片描述

本地存储对象
- 保存对象前，需要做字符串转换
- 读取对象数据前，需要再转换成JSON格式

var stu = {
    "stuName": "tom", "stuAge": 18, "stuGender": true }localStorage.setItem('stu',stu)     //保存对象，但是无法解析数据

在这里插入图片描述

//兼容性的写法if (localStorage) {
       localStorage.setItem('stu', JSON.stringify(stu)) //保存对象前，需要做字符串转换    alert(JSON.parse(localStorage.getItem('stu')).stuName)  //读取对象数据前，需要再转换成JSON格式}else{
       alert('您的浏览器不支持本地存储，请升级！')}

在这里插入图片描述

3.2.3 localStorage 存储登陆验证

登陆验证页面(login.html)

首页页面(index.html)

  欢迎访问首页

3.2.4 localStorage 记住密码练习

3.3 会话存储 sessionStorage

sessionStorage 与 localStorage 语法类似，只是生命周期限于会话期内，会话结束后自动销毁

sessionStorage 主要用于在多页面间共享数据

3.3.1 sessionStorage 模拟购物车

index.html

pay.html

  当前购物车的商品清单:

3.4 离线存储

离线应用程序原理是建立一个URL列表清单
- 当应用和服务器建立联系时，浏览器将在本地缓存列表清单中的资源文件
- 当离线时，浏览器将调用缓存来支撑Web应用

离线缓存机制的关键是Cache Manifest 文件

3.4.1 离线缓存的配置文件

缓存文件是一个文本文件，后缀名是manifest

CACHE MANIFEST# version 0.0.0CACHE:# 需要缓存的资源文件css/style.cssImage/head.jpgNETWORK:# 在线访问的资源文件Index.jsp

3.4.2 离线缓存模拟断网情况

当断网时，页面只能显示img2，只有联网时，页面才会显示img1

index.html

    
       
       离线缓存

myCache.manifest

CACHE MANIFEST#version  0.0.0CACHE:#需要缓存的资源文件images/2.jpgNETWORK:#在线访问的资源文件images/1.jpg

3.4.3 离线缓存查看方法

检查/Network

4. 新增地理定位 API

地理位置（Geolocation）是 HTML5 的重要特性之一
- 提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用
- 使得开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能，具有划时代的意义

4.1 常见定位技术

GPS
- 覆盖面广，需要GPS设备

WIFI
- 适合室内环境，需要WIFI热点

IP定位
- 模糊匹配，精度要求不高

4.2 定位的语法

Geolocation 是 navigator 对象的属性

getCurrentPosition 方法实现数据定位
- latitude (纬度)
- longitude (经度)

window.navigator.geolocation.getCurrentPosition(success,error,null)success(position): 成功的回调函数error(errorcode): 失败的回调函数

4.3 定位 success 函数的参数

参数	功能
coords.`latitude`	`纬度`
coords.`longitude`	`经度`
coords.`altitude`	`海拔`
coords.`accuracy`	`位置精确度`
coords.`altitudeAccuracy`	`海拔精确度`
coords.`heading`	`朝向`
coords.`speed`	`速度`

4.4 百度地图 API 功能

百度地图 API 官网

设置地图3D视角

5. 新增文件操作 API

5.1 文件操作 API

HTML5 提供一个页面层调用的API文件，通过调用这个API文件中的对象、方法和接口，可以方便的访问文件的属性或内容

通过 file 表单元素，访问和操纵本地文件
- File 对象
- FileList 对象

通过 FileReader 对象读取文件

5.2 文件对象

文件对象包含的基本属性
- Name
- lastModifieddate(上一次修改文件的时间)

文件对象继承了Blob接口，可以使用接口提供的属性
- size
- type(文件类型)

文件列表展示练习

5.3 文件读取对象的方法

文件读取对象常用方法
- readAsDataURL：读取图片文件
- readAsText：读取文本文件

var reader = new FileReader();reader.onload = function(e){
   	// 通过 e.target.result 获取文件内容}reader.readAsDataURL(file); // 读取图片文件// reader.readAsText(file);  // 读取文本文件

文件读取练习

    发表旅行感想

更改头像练习

5.4 文件读取对象的事件

常用的事件

事件名	描述
onloadstart	当读取数据开始时触发
onprogress	当正在读取数据时触发
onerror	当读取数据失败时触发
onload	当数据读取成功时触发
onloadend	当数据读取结束时触发，不论是否成功

执行顺序
- Loadstart -> onprogress -> onload -> onloadend

事件的参数
- 获取的数据：e.target.result
- 错误码：e.target.error.code
- 常见错误信息：
  - NOT_FOUND_ERR：查不到文件
  - ENCODING_ERR：文件容量太大
  - NOT_READABLE_ERR：权限不足