当前位置：首页 > 行业动态 > 正文

html5新增的api

admin
行业动态
2025-05-13
2

HTML5新增Canvas绘图、Geolocation定位、WebStorage本地存储、WebSockets实时通信及IndexedDB数据库等API，提升交互性与数据存储

HTML5新增API详解

本地存储（Local Storage & Session Storage）

功能：在客户端持久化存储数据，解决Cookie存储容量小的问题。
区别：
- localStorage：数据长期存储，即使关闭浏览器也不会丢失。
- sessionStorage：数据仅在当前页面会话中有效，关闭页面后清除。

用法：

// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
// 读取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

事件监听：当其他页面修改localStorage时，可监听storage事件。

API名称	作用域	生命周期	容量限制
localStorage	同源所有页面共享	长期存储（永久）	~5MB
sessionStorage	单个页面会话内有效	页面关闭后清除	~5MB

Canvas绘图API

功能：通过JavaScript动态渲染2D/3D图形（需WebGL），替代Flash等技术。

核心方法：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 或 'webgl'（3D）
// 绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
// 绘制文本
ctx.font = '20px Arial';
ctx.fillText('Hello Canvas', 10, 70);

高级特性：
- 渐变填充：createLinearGradient() / createRadialGradient()
- 阴影效果：shadowColor / shadowBlur / shadowOffsetX/Y
- 动画：结合requestAnimationFrame实现流畅动画

地理定位（Geolocation）

功能：获取设备地理位置信息（需用户授权）。

用法：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
}
function success(position) {
  const { latitude, longitude } = position.coords;
  console.log(`纬度: ${latitude}, 经度: ${longitude}`);
}
function error(err) {
  console.error(`错误码: ${err.code}, 信息: ${err.message}`);
}

持续监听：

const watchId = navigator.geolocation.watchPosition(callback);
navigator.geolocation.clearWatch(watchId); // 停止监听

Web Worker多线程

功能：在后台执行脚本，避免阻塞主线程（如处理大数据分析）。

示例：

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ num: 1000000 }); // 向Worker传数据
worker.onmessage = (e) => console.log(`结果: ${e.data}`);
// worker.js
self.onmessage = (e) => {
  const sum = e.data.num  2; // 模拟计算任务
  self.postMessage(sum); // 返回结果
};

File API文件操作

功能：读取本地文件内容，支持拖拽上传。

用法：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => console.log(reader.result); // 文件内容
});

拖拽支持：

document.body.addEventListener('dragover', (e) => e.preventDefault());
document.body.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  // 处理文件列表
});