html5提供了api

HTML5核心API

本地存储（Web Storage）

• 功能：提供持久化数据存储，分为localStorage（长期存储）和sessionStorage（会话存储）
• 使用场景：替代Cookie存储大量数据，保存用户偏好设置等
• 示例：

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

Canvas绘图

• 功能：通过JavaScript绘制图形，支持动画和图像处理
• 核心方法：
  • getContext('2d')：获取2D绘图上下文
  • fillRect(x,y,width,height)：绘制填充矩形
  • strokeText(text,x,y)：绘制文本
• 示例：

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 50);

地理定位（Geolocation）

• 功能：获取设备地理位置信息
• 使用方法：

  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

• 权限处理：需用户授权，浏览器可能弹出权限请求框

拖放API（Drag and Drop）

• 核心事件：
  • dragstart：开始拖动时触发
  • drop：放置目标时触发
• 示例：

  document.getElementById('draggable').addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', 'Drag data');
  });

媒体API

• Audio/Video控制：
  • currentTime：当前播放时间
  • pause()/play()：控制播放状态
• 字幕支持：<track>标签添加WebVTT格式字幕

WebSockets通信

• 特点：全双工通信，低延迟，适合实时应用
• 基础用法：

  const ws = new WebSocket('ws://example.com');
  ws.onmessage = function(event) { console.log(event.data); };
  ws.send('Hello Server');

IndexedDB

• 功能：客户端数据库，支持事务和索引
• 基本操作：
  • 打开数据库：indexedDB.open('dbname')
  • 事务处理：db.transaction([...], 'readwrite')
  • 数据操作：objectStore.put(data)

API特性对比表

相关问题与解答

Q1：如何选择Web Storage和IndexedDB？
A1：若需存储简单键值数据且容量<5MB，优先使用Web Storage；若需要结构化数据存储、索引查询或大容量存储，应选择IndexedDB，例如用户表单缓存适合Web Storage,而离线应用数据管理适合IndexedDB。

Q2：Canvas与SVG在HTML5绘图中的区别是什么？
A2：主要区别体现在：

• 渲染方式：Canvas绘制位图，SVG保留矢量图形
• 性能表现：Canvas适合动态动画，SVG适合静态图形
• 交互性：Canvas需重绘实现交互，SVG可直接操作DOM元素
• 适用场景：游戏开发多用Canvas，图标设计