什么是 Web API？

Web API 是 Web 的应用程序编程接口。

浏览器 API 可以扩展 Web 浏览器的功能。

服务器 API 可以扩展 Web 服务器的功能。

• 它可以扩展浏览器的功能
• 它可以极大简化复杂的功能
• 它可以为复杂的代码提供简单的语法

1、Web Form API

约束验证 DOM 方法

属性	描述
checkValidity()	如果 input 元素包含有效数据，则返回 true。
setCustomValidity()	设置 input 元素的 validationMessage 属性,自定义错误提示信息
示例：

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  
  if (!inpObj.checkValidity()) {
    inpObj.setCustomValidity("密码是必填的")
  }else {
  inpObj.setCustomValidity("")
  }
}
</script>

注意：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。所以如果输入的格式正确，就将setCustomValidity 清空，使JavaScript重新判断validity.customError的值。

属性

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

有效性属性

属性	描述
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。

约束验证 DOM 属性

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

有效性属性

属性	描述
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。

示例：

rangeOverflow 属性

如果 input 字段中的数字大于 100（input 的 max 属性），则显示一条消息：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>

2、Web History API

Web History API 提供了访问 windows.history 对象的简单方法。

window.history 对象包含用户访问过的 URL（网站）。

所有浏览器都支持 Web History API。

History 对象方法

方法	描述	说明
back()	加载历史列表中的上一个 URL。	history.forward() 方法加载历史列表中的下一个 URL（页面）。 history.forward() 方法仅在存在下一页时才有效。 history.forward() 与 history.go(1) 相同。 history.forward() 与在浏览器中单击“前进”按钮相同。
forward()	加载历史列表中的下一个 URL。	history.forward() 方法加载历史列表中的下一个 URL（页面）。 history.forward() 方法仅在存在下一页时才有效。 history.forward() 与 history.go(1) 相同。 history.forward() 与在浏览器中单击“前进”按钮相同。 ｜
go()	从历史列表中加载特定的 URL。	history.go() 方法从历史列表中加载一个 URL（页面）。 history.go() 方法仅在页面存在于历史列表中时才有效。 history.go(0) 重新加载页面。 history.go(-1) 与 history.back() 相同。 history.go(1) 与 history.forward() 相同。 ｜

History 对象属性

属性	描述
length	返回历史列表中的 URL 数量。

示例：

<button onclick="myFunction()">后退</button>
<button onclick="getLength()">后退</button>

<script>
function myFunction() {
  window.history.back();
}
function getLength() {
  let length = history.length;
  alter('length')
}
</script>

3、Web Storage API

Web Storage API 是一种用于在浏览器中存储和检索数据的简单语法。

对象	描述
localStorage 对象	localStorage 对象提供对特定网站的本地存储的访问。 它允许您存储、读取、添加、修改和删除该域的数据项。 存储的数据没有到期日期，并且在浏览器关闭时不会被删除。 这些数据将在几天、几周和几年内均可用。
sessionStorage 对象	sessionStorage 对象与 localStorage 对象相同。 不同之处在于 sessionStorage 对象存储会话的数据。 当浏览器关闭时，数据会被删除。

Storage 对象方法

方法	描述	示例
setItem()	setItem() 方法将数据项存储在 storage 中。 它接受一个名称和一个值作为参数。	localStorage.setItem("name", "Bill Gates"); sessionStorage.setItem("name", "Bill Gates");
getItem()	getItem() 方法从存储（storage）中检索数据项。 它接受一个名称作为参数	localStorage.getItem("name"); sessionStorage.getItem("name");
removeItem()	删除指定的本地存储项。 removeItem() 方法属于 Storage 对象，它可以是 localStorage 对象，也可以是 sessionStorage 对象。	localStorage.removeItem("mytime"); sessionStorage.removeItem("mytime");
clear()	删除所有本地存储项。 clear() 方法属于 Storage 对象，它可以是 localStorage 对象，也可以是 sessionStorage 对象。	localStorage.clear(); sessionStorage.clear();

4、Web Worker API

在 HTML 页面中执行脚本时，页面在脚本完成之前是无响应的。

Web Worker 是在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续对页面进行操作，同时 web worker 在后台运行。

完整的 Web Worker 实例代码

let i = 0;

function timedCount() {
  i ++;
  postMessage(i); //用于将消息发送回 HTML 页面
  setTimeout("timedCount()",500);
}

timedCount();

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  //检查浏览器是否支持
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");  //创建一个新的 web worker 对象并运行 "demo_workers.js" 中的代码
  }
  //可以发送和接收来自 web worker 的消息,向 web worker 添加一个 "onmessage" 事件侦听器
  w.onmessage = function(event) {
    //当 Web Worker 发布消息时，将执行事件侦听器中的代码。来自 Web Worker 的数据存储在 event.data 中。
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker() {
  w.terminate(); //终止 web worker
  w = undefined; //重用 Web Worker
}
</script>

</body>
</html>