Storage API Storage API（存储 API）（包括 localStorage 和 sessionStorage）允许开发者在用户的浏览器中以键值对的形式存储数据。这些数据可以用于保存用户的偏好设置、会话信息或其他需要持久化的数据。localStorage 提供长期存储，而 sessionStorage 则在浏览器会话结束后清除数据。存储 API 使得在客户端轻松管理数据变得更加方便，有助于提升用户体验。
// 将数据保存到localStorage
localStorage.setItem('userName', '一点一木');
// 从localStorage中检索数据
const user = localStorage.getItem('userName');
// 清除localStorage中的数据
localStorage.removeItem('userName');
DOM API DOM API（文档对象模型 API）允许开发者操作网页的结构、样式和内容。它提供了一组方法和属性，使得可以动态访问和修改HTML文档中的元素，响应用户交互，实现动画效果等。通过DOM API，开发者能够创建、删除和更新网页内容，从而提升用户体验并实现复杂的功能。
// 选择并更新元素
const element = document.querySelector('#myElement');
element.textContent = 'Hello, World!';
Canvas API Canvas API 允许开发者在网页上绘制图形和动画，利用
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(10, 10, 150, 100);
History API History API 允许开发者与浏览器的会话历史记录进行交互，提供了一种方法来操作历史记录栈。通过使用 pushState 和 replaceState 方法，开发者可以在不重新加载页面的情况下更新URL和状态，从而实现更流畅的单页应用体验。History API 使得浏览器的导航行为更加灵活，用户可以在应用中自由前后导航。
history.pushState({
page: 1 }, 'title', '/page1');
history.replaceState({
page: 2 }, 'title', '/page2');
Clipboard API Clipboard API （剪贴板 API）允许开发者访问和操作用户的剪贴板内容，使得实现复制、粘贴等功能变得更加简单。它提供了一种安全的方式来读取和写入剪贴板数据，支持文本、图像等多种格式。这使得在网页应用中实现用户友好的交互体验更加高效和灵活。
navigator.clipboard.writeText('Hello, Clipboard!').then(() => {
console.log('文本已复制到剪贴板');
}).catch(err => {
console.error('复制文本失败:', err);
});
Fullscreen API Fullscreen API （全屏 API）允许开发者将特定元素或整个网页以全屏模式呈现，从而提供更沉浸式的用户体验。它常用于视频播放、游戏和其他需要占用整个屏幕的应用。用户可以通过简单的调用请求全屏，并且可以轻松切换回窗口模式，增强了互动性和可视性。
document.getElementById('myElement').requestFullscreen().catch(err => {
console.error(`启用全屏模式时发生错误: ${
err.message}`);
});
FormData API FormData API 用于轻松构建和操作表示表单数据的键值对，特别适合用于通过 AJAX 提交表单。它允许开发者收集用户输入，包括文本字段、文件上传等，并以合适的格式发送到服务器。FormData API 使得处理复杂表单数据变得更加简单高效。
const form = document.querySelector('form');
const formData = new FormData(form);
fetch('/submit', {
method: 'POST', body: formData }).then(response => {
if (response.ok) {
console.log('表单提交成功！');
}
});
Fetch API Fetch API 提供了一种现代化且灵活的方式来进行异步网络请求，作为 XMLHttpRequest 的更简单、基于 Promise 的替代方案。它允许开发者轻松发送 HTTP 请求，处理响应，并进行更复杂的网络交互，如上传文件或处理 JSON 数据。Fetch API 使得网络请求的代码更加清晰和易于维护。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('获取数据时发生错误:', error));
Drag and Drop API Drag and Drop API （拖放 API）允许开发者在网页应用中实现拖放功能，增强用户交互体验。它提供了一组接口，使得用户可以通过拖动元素来移动、复制或删除内容，常用于实现文件上传、排序列表等功能。通过拖放 API，创建直观的用户界面变得更加简单。
const item = document.getElementById('item');
item.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', item.id);
});
Payment Request API Payment Request API （支付请求 API）用于简化网页上的支付流程，提供一致的用户体验，支持多种支付方式。它允许开发者以用户友好的方式收集支付信息，从而提高在线购物的便利性和安全性。通过该 API，用户可以快速选择支付方式并完成交易。
if (window.PaymentRequest) {
const payment = new PaymentRequest([{
supportedMethods: 'https://example.com/pay'
}], {
total: {
label: '总金额', amount: {
currency: 'CNY', value: '10.00' } }
});
payment.show().then(result => {
// 处理支付结果
console.log(result);
}).catch(error => {
console.error('支付失败:', error);
});
}
HTML Sanitizer API
HTML Sanitizer API是一个提议中的新浏览器 API，旨在为网页平台提供一种安全且易于使用的 HTML 清理能力。
HTML Sanitizer API （HTML 清理器 API）用于安全地清理不可信的 HTML 内容，以防止安全风险，如跨站脚本（XSS）攻击。它提供了一种简单的方法来处理和过滤用户输入的 HTML，确保只允许安全的内容在网页中显示，从而保护用户和网站的安全。
const dirtyHTML = '';
const cleanHTML = sanitizer.sanitize(dirtyHTML);
console.log(cleanHTML); // 安全的HTML输出
Geolocation API Geolocation API （地理位置API）允许开发者访问用户设备的地理位置信息，以便实现基于位置的服务和功能。它能够获取用户的当前位置信息（如经度和纬度），并在应用中应用于地图、定位服务或个性化内容。该 API 需要用户授权以确保隐私和安全。
Geolocation API 需要在 HTTPS 环境下运行，因此确保您的网站使用 SSL 证书。
在项目开发过程中测试的方法：
使用浏览器开发者工具模拟位置：在 Chrome 中，打开开发者工具，选择“更多工具” > “传感器”，然后您可以选择模拟的地理位置进行测试。
navigator.geolocation.getCurrentPosition((position) => {
console.log(`纬度: ${
position.coords.latitude}, 经度: ${
position.coords.longitude}`);
}, (error) => {
console.error(`获取位置时发生错误: ${
error.message}`);
});