Web API 应用程序编程接口

目录

1. Web Form API

2. Web History API

3. Web Storage API

4. Web Worker API

5. Web Fetch API

6. Web Geolocation API

---

1. Web Form API

（1）约束验证DOM方法：input.checkValidity()

checkValidity()	如果 input 元素包含有效数据，则返回 true。
setCustomValidity()	设置 input 元素的 validationMessage 属性。

（2）约束验证DOM属性：input.validationMessage

validity	包含与输入元素有效性相关的布尔属性。
validationMessage	包含当有效性为 false 时浏览器将显示的消息。
willValidate	指示是否将验证 input 元素。

（3）有效性属性：input.validity.rangeOverflow

customError	如果设置了自定义有效性消息，则设置为 true。
patternMismatch	如果元素的值与其 pattern 属性不匹配，则设置为 true。
rangeOverflow	如果元素的值大于其 max 属性，则设置为 true。
rangeUnderflow	如果元素的值小于其 min 属性，则设置为 true。
stepMismatch	如果元素的值对其 step 属性无效，则设置为 true。
tooLong	如果元素的值超过其 maxLength 属性，则设置为 true。
typeMismatch	如果元素的值对其 type 属性无效，则设置为 true。
valueMissing	如果元素（具有 required 属性）没有值，则设置为 true。
valid	如果元素的值有效，则设置为 true。

2. Web History API

（1）history.back();    加载历史列表中的上一个 URL

（2）history.forward();   加载历史列表中的下一个 URL

（3）history.go(number | URL);   加载历史列表中的某个具体页面

（4）history.length;    返回历史列表中的 URL 数量

3. Web Storage API

（1）localStorage对象：本地存储，除非手动删除，否则永久有效。

（2）sessionStorage对象：会话存储，当浏览器关闭时，数据会被删除。

（3）Storage对象属性和方法：

• 数量 xxxStorage.length;
• 名称 xxxStorage.key(n);
• 存储 xxxStorage.setItem("name","value");
• 检索 xxxStorage.getItem("name");
• 删除 xxxStorage.removeItem("name");
• 清空 xxxStorage.clear();

4. Web Worker API

//后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能.
let w;

function startWorker() {
    //判断是否存在
  if (typeof(w) == "undefined") {
    //创建Worker对象
    w = new Worker("demo_workers.js");
  }
    //添加事件监听器
  w.onmessage = function(event) {
    element.innerHTML = event.data;
  };
}

function stopWorker() {
    //终止Woker
  w.terminate();
    //重用
  w = undefined;
}
//postMessage() 方法 - 用于将消息发送回 HTML 页面

5. Web Fetch API

//发出HTTP请求
let file = "url";
async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
}

6. Web Geolocation API

获取用户的地理位置

（1）navigator.geolocation.getCurrentPosition();返回一个对象。

属性	返回
coords.latitude	以十进制数表示的纬度（始终返回）。
coords.longitude	以十进制数表示的经度（始终返回）。
coords.accuracy	位置精度（始终返回）。
coords.altitude	平均海平面以上的高度（以米计）（如果可用则返回）。
coords.altitudeAccuracy	位置的高度精度（如果可用则返回）。
coords.heading	从北顺时针方向的航向（如果可用则返回）。
coords.speed	以米/秒计的速度（如果可用则返回）。
timestamp	响应的日期/时间（如果可用则返回）。

（2）navigator.geolocation.watchPosition();返回用户的当前位置，并随着用户移动继续返回更新的位置。clearWatch() - 停止