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

html5提供新的api

admin
行业动态
2025-05-06
3

HTML5新增Canvas绘图、Geolocation定位、LocalStorage本地存储、WebSocket通信、Video/Audio多媒体、IndexedDB数据库、拖放API等，提升网页交互与离线能力，支持多线程及

HTML5 新API详解

本地存储（Local Storage & Session Storage）

用途：在客户端存储键值对数据，替代传统Cookie，支持更大容量。
区别：
|特性| localStorage | sessionStorage |
|—|—|—|
|生命周期|永久（手动清除）|会话结束（标签页关闭）|
|作用域|同源所有页面共享|同源同标签页共享|
|容量|约5MB|约5MB|

语法：

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

WebSocket API

用途：实现浏览器与服务器的全双工实时通信，替代传统轮询。
优势：低延迟、双向通信、节省服务器资源。
示例：

const socket = new WebSocket('ws://example.com');
socket.onopen = () => { console.log('连接成功'); };
socket.onmessage = (event) => { console.log('收到消息：', event.data); };
socket.send('Hello Server');

地理定位（Geolocation）API

用途：获取用户设备的经纬度信息（需用户授权）。
关键方法：

html5提供新的api 第1张

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(`纬度：${position.coords.latitude}`);
    console.log(`经度：${position.coords.longitude}`);
  },
  (error) => { console.error('定位失败：', error); }
);

Canvas API

用途：动态渲染2D/3D图形（如游戏、图表）。
2D示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50); // 绘制红色矩形

拖放（Drag and Drop）API

示例：

element.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', '拖拽的数据');
});

媒体元素（Video/Audio）API

新增属性：

autoplay：自动播放
controls：显示控件栏
loop：循环播放
muted：静音

事件监听：

const video = document.querySelector('video');
video.addEventListener('play', () => { console.log('播放开始'); });

Web Worker API

用途：在后台线程执行脚本，避免阻塞主线程。
示例：

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Hello Worker');
worker.onmessage = (e) => { console.log('收到消息：', e.data); };
// worker.js
self.onmessage = (e) => {
  postMessage(`Worker收到：${e.data}`);
};

File API

用途：处理本地文件（如预览、上传前验证）。
示例：

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