知识库

Appearance

Return to top
On this page

HTML5新增API

HTML5不仅引入了新的语义化标签，还提供了一系列强大的API，极大地扩展了Web应用的功能。

本地存储API

localStorage

localStorage用于在浏览器中持久存储数据，数据不会过期。

javascript
// 存储数据
localStorage.setItem('username', '张三');
localStorage.setItem('preferences', JSON.stringify({theme: 'dark', lang: 'zh'}));

// 读取数据
const username = localStorage.getItem('username');
const preferences = JSON.parse(localStorage.getItem('preferences'));

// 删除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();

sessionStorage

sessionStorage与localStorage类似，但数据仅在当前会话期间有效。

javascript
// 存储数据
sessionStorage.setItem('tempData', '临时数据');

// 读取数据
const tempData = sessionStorage.getItem('tempData');

Web Storage事件

当存储数据发生变化时触发：

javascript
window.addEventListener('storage', function(e) {
  console.log('存储变化:', e.key, e.oldValue, e.newValue);
});

地理定位API (Geolocation)

用于获取用户的地理位置信息。

javascript
// 检查浏览器支持
if (navigator.geolocation) {
  // 获取当前位置
  navigator.geolocation.getCurrentPosition(
    function(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log(`纬度: ${latitude}, 经度: ${longitude}`);
    },
    function(error) {
      console.error('获取位置失败:', error.message);
    }
  );
} else {
  console.log('浏览器不支持地理定位');
}

// 监听位置变化
const watchId = navigator.geolocation.watchPosition(
  function(position) {
    console.log('位置更新:', position.coords.latitude, position.coords.longitude);
  },
  function(error) {
    console.error('位置监听错误:', error.message);
  },
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);

// 停止监听
// navigator.geolocation.clearWatch(watchId);

Canvas API

用于在网页上绘制图形。

html
<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 100, 80);

// 绘制圆形
ctx.beginPath();
ctx.arc(200, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = '#00FF00';
ctx.fill();

// 绘制文本
ctx.font = '20px Arial';
ctx.fillStyle = '#0000FF';
ctx.fillText('Hello Canvas', 10, 150);

// 绘制线条
ctx.beginPath();
ctx.moveTo(300, 20);
ctx.lineTo(350, 80);
ctx.strokeStyle = '#FF00FF';
ctx.lineWidth = 2;
ctx.stroke();
</script>

拖放API (Drag and Drop)

实现元素的拖放功能。

html
<div id="draggable" draggable="true" style="width: 100px; height: 100px; background: red;">
  拖我
</div>

<div id="dropzone" style="width: 200px; height: 200px; background: lightblue; margin-top: 20px;">
  放置区域
</div>

<script>
const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');

draggable.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
});

dropzone.addEventListener('dragover', function(e) {
  e.preventDefault(); // 必须调用以允许放置
});

dropzone.addEventListener('drop', function(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  const element = document.getElementById(data);
  dropzone.appendChild(element);
});
</script>

文件API

处理用户选择的文件。

html
<input type="file" id="fileInput" multiple accept="image/*">
<div id="preview"></div>

<script>
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
  const files = e.target.files;
  
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    
    // 显示文件信息
    console.log('文件名:', file.name);
    console.log('大小:', file.size);
    console.log('类型:', file.type);
    
    // 使用FileReader读取文件
    const reader = new FileReader();
    reader.onload = function(e) {
      if (file.type.startsWith('image/')) {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '200px';
        preview.appendChild(img);
      }
    };
    reader.readAsDataURL(file);
  }
});
</script>

Web Workers

在后台线程中运行JavaScript，不阻塞UI。

javascript
// main.js
const worker = new Worker('worker.js');

worker.postMessage('Hello Worker!');

worker.onmessage = function(e) {
  console.log('主线程收到:', e.data);
};

// worker.js
self.onmessage = function(e) {
  console.log('Worker收到:', e.data);
  
  // 执行耗时任务
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }
  
  self.postMessage('计算完成: ' + result);
};

WebSocket API

实现全双工通信。

javascript
// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open', function(event) {
  console.log('连接已建立');
  socket.send('Hello Server!');
});

socket.addEventListener('message', function(event) {
  console.log('收到消息:', event.data);
});

socket.addEventListener('error', function(event) {
  console.error('WebSocket错误:', event);
});

socket.addEventListener('close', function(event) {
  console.log('连接已关闭');
});

历史记录API (History API)

操作浏览器历史记录。

javascript
// 添加历史记录
history.pushState({page: 1}, '标题', '/page1');

// 替换当前历史记录
history.replaceState({page: 2}, '标题', '/page2');

// 监听历史记录变化
window.addEventListener('popstate', function(event) {
  console.log('状态变化:', event.state);
});

全屏API (Fullscreen API)

控制元素的全屏显示。

javascript
const element = document.getElementById('myElement');

// 请求全屏
function requestFullscreen() {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari
    element.webkitRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari
    document.webkitExitFullscreen();
  }
}

// 监听全屏变化
document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
});

通知API (Notification API)

显示系统通知。

javascript
// 请求通知权限
Notification.requestPermission().then(function(permission) {
  if (permission === 'granted') {
    // 显示通知
    const notification = new Notification('标题', {
      body: '通知内容',
      icon: 'icon.png'
    });
    
    // 监听通知事件
    notification.onclick = function() {
      console.log('通知被点击');
    };
  }
});

音频/视频API

控制媒体元素。

html
<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById('myVideo');

// 播放控制
video.play();
video.pause();

// 监听事件
video.addEventListener('ended', function() {
  console.log('视频播放结束');
});

video.addEventListener('timeupdate', function() {
  console.log('当前播放时间:', video.currentTime);
});

// 设置播放时间
video.currentTime = 30; // 跳转到30秒

// 音量控制
video.volume = 0.5; // 设置音量为50%
</script>

性能API (Performance API)

测量页面性能。

javascript
// 获取页面加载时间
const perfData = performance.getEntriesByType('navigation')[0];
console.log('页面加载时间:', perfData.loadEventEnd - perfData.loadEventStart);

// 测量特定操作的时间
const start = performance.now();
// 执行某些操作
const end = performance.now();
console.log('操作耗时:', end - start, '毫秒');

// 监听性能条目
const observer = new PerformanceObserver(function(list) {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration);
  }
});
observer.observe({entryTypes: ['measure', 'navigation']});

使用场景总结

HTML5 API提供了丰富的功能，适用于各种Web应用：

  1. 本地存储：用户偏好设置、缓存数据
  2. 地理定位：位置相关服务
  3. Canvas：图形绘制、游戏开发
  4. 拖放：文件上传、界面交互
  5. 文件API：图片预览、文件处理
  6. Web Workers：计算密集型任务
  7. WebSocket：实时通信
  8. 历史记录API：单页应用导航
  9. 全屏API：媒体播放器、游戏
  10. 通知API：消息提醒

这些API使Web应用能够提供接近原生应用的体验，极大地扩展了Web平台的能力。