html5新api

HTML5新API详解

地理定位API（Geolocation API）

功能：获取设备的位置信息（经纬度），需用户授权。
核心方法：

• navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
• navigator.geolocation.watchPosition(successCallback, errorCallback)

参数说明：
| 参数名 | 类型 | 说明 |
|—————–|———|————————–|
| successCallback | Function | 成功时回调，接收位置对象 |
| errorCallback | Function | 失败时回调，接收错误对象 |

示例代码：

if (navigator.geolocation) {  
  navigator.geolocation.getCurrentPosition(  
    (position) => {  
      console.log(`纬度: ${position.coords.latitude}, 经度: ${position.coords.longitude}`);  
    },  
    (error) => {  
      console.error(`错误代码: ${error.code}, 消息: ${error.message}`);  
    }  
  );  
} else {  
  console.log("浏览器不支持地理定位API");  
} 

拖放API（Drag and Drop API）

功能：实现元素拖拽操作，替代传统JavaScript拖拽逻辑。
核心属性/事件：

• draggable（属性）：设置为true启用拖拽。
• dragstart、dragover、drop（事件）：分别对应拖拽开始、拖拽经过、放下时触发。

示例代码：

<div id="dragSource" draggable="true">拖拽我</div>  
<div id="dropTarget">放置区</div>  
<script>  
  const source = document.getElementById('dragSource');  
  const target = document.getElementById('dropTarget');  
  source.addEventListener('dragstart', (e) => {  
    e.dataTransfer.setData('text/plain', '拖拽的数据');  
  });  
  target.addEventListener('dragover', (e) => {  
    e.preventDefault(); // 允许放置  
  });  
  target.addEventListener('drop', (e) => {  
    const data = e.dataTransfer.getData('text/plain');  
    target.textContent = `接收到: ${data}`;  
  });  
</script> 

Web存储API（Web Storage API）

功能：在客户端存储数据，分为localStorage（持久化）和sessionStorage（会话级）。
核心方法：

• setItem(key, value)：存储数据。
• getItem(key)：获取数据。
• removeItem(key)：删除指定数据。
• clear()：清空所有数据。

示例代码：

// 存储数据  
localStorage.setItem('username', 'JohnDoe');  
// 读取数据  
console.log(localStorage.getItem('username')); // JohnDoe  
// 删除数据  
localStorage.removeItem('username'); 

Canvas API

功能：通过画布绘制图形，支持2D/3D（WebGL）。
核心对象：

• CanvasRenderingContext2D：2D绘图上下文，提供arc、fillRect、strokeText等方法。

示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>  
<script>  
  const canvas = document.getElementById('myCanvas');  
  const ctx = canvas.getContext('2d');  
  ctx.fillStyle = 'blue';  
  ctx.fillRect(50, 25, 100, 50); // 绘制蓝色矩形  
</script> 

Web Workers API

功能：在后台线程执行脚本，避免阻塞主线程。
核心步骤：

1. 创建Worker文件（如worker.js）：

   self.onmessage = (e) => {  
     const result = e.data  2; // 示例计算  
     postMessage(result); // 返回结果  
   }; 

2. 主线程中调用Worker：

   const worker = new Worker('worker.js');  
   worker.postMessage(10); // 发送数据  
   worker.onmessage = (e) => {  
     console.log(`结果: ${e.data}`); // 输出20  
   }; 

相关问题与解答

问题1：如何检测浏览器是否支持地理定位API？
解答：通过检查navigator.geolocation是否存在，若不存在，则表示不支持。

if ('geolocation' in navigator) {  
  // 支持地理定位API  
} else {  
  // 不支持，提示用户或降级处理  
} 

问题2：Web存储API的localStorage和sessionStorage有什么区别？
解答：
| 区别 | localStorage | sessionStorage |
|——————-|——————————–|——————————|
| 生命周期 | 永久保存，除非手动清除 | 仅在当前页面会话期间有效 |
| 数据共享范围 | 同源的所有窗口/标签页共享 | 仅当前窗口/标签页可见