HTML5和JavaScript是现代网页开发的基石，它们共同提供了丰富的功能和效果，让开发者能够创建交互性强、视觉效果出色的网站和应用，以下是五个不能不看的HTML5 JavaScript效果，这些效果不仅提升了用户体验，也展示了Web技术的先进之处。
### 1. Canvas绘图
HTML5引入了`
```html
```
### 2. Web Storage
Web存储API包括`localStorage`和`sessionStorage`，它们允许开发者在用户的浏览器上存储数据，以便跨会话或页面刷新时保持状态，这可以用于保存用户设置、购物车内容等。
```javascript
// 存储数据到localStorage
localStorage.setItem('username', 'JohnDoe');
// 从localStorage获取数据
const username = localStorage.getItem('username');
```
### 3. Web Workers
Web Workers允许在后台线程中运行JavaScript代码，从而不会阻塞主线程的UI更新，这对于执行耗时计算或处理大量数据非常有用。
```javascript
// 创建一个worker
const worker = new Worker('worker.js');
// 监听message事件来接收worker的消息
worker.addEventListener('message', function(e) {
console.log('Worker message:', e.data);
});
// 向worker发送消息
worker.postMessage('Hello Worker!');
```
### 4. Geolocation API
Geolocation API允许网页访问设备的地理位置信息，这可以用于提供基于位置的服务，如地图应用、天气信息等。
```javascript
navigator.geolocation.getCurrentPosition(function(position) {
console.log('Latitude:', position.coords.latitude);
console.log('Longitude:', position.coords.longitude);
});
```
### 5. File API
File API允许访问用户的文件系统，让用户可以选择文件上传，并在客户端进行预览和操作，这对于开发文件编辑器、图像处理工具等应用非常有用。
```html
```
### FAQs
**Q1: HTML5和JavaScript的关系是什么？
A1: HTML5是一种标记语言，用于构建网页的结构，而JavaScript是一种编程语言，用于添加交互性和动态功能，两者通常一起使用，HTML5定义了网页的内容，而JavaScript则控制这些内容的动态行为。
**Q2: Web Storage中的localStorage和sessionStorage有什么区别？
A2: `localStorage`是持久性的，即使关闭浏览器窗口或重新启动浏览器，数据也不会丢失，而`sessionStorage`是会话性的，当浏览器窗口关闭时，数据会被清除，`localStorage`适合长期存储数据，而`sessionStorage`适合短期会话数据。