上一篇
html5不使用服务器
HTML5作为前端技术，静态页面可本地运行无需服务器，但动态交互、数据存储
HTML5本地存储与离线应用
HTML5提供了多种无需服务器支持的客户端存储机制,允许网页在本地保存数据，以下是两种主要方式：
| 存储类型 | 特点 | 容量限制 |
|---|---|---|
localStorage | 持久化存储，窗口关闭后数据仍存在，所有同源页面共享 | 通常5MB左右 |
IndexedDB | 结构化数据库，支持事务和索引，适合大量数据存储 | 单个数据库50-100MB |
示例代码：
// 使用localStorage保存数据
localStorage.setItem('username', 'JohnDoe');
console.log(localStorage.getItem('username')); // 读取数据离线应用实现（Manifest文件）
通过manifest.appcache文件可指定需要缓存的资源，使网页在断网时仍能访问核心内容：
<!DOCTYPE html> <html manifest="cache.manifest"> <head>离线应用</title> </head> <body> <h1>这是离线内容</h1> </body> </html>
cache.manifest示例：
%ignore_pre_ 3%本地媒体播放
HTML5的<video>和<audio>标签可直接播放本地文件，无需服务器：
<video controls> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持HTML5视频 </video>
注意事项
- 跨域限制：加载外部资源仍需遵守浏览器安全策略
- 实时性需求：动态数据更新仍需网络通信
- 地理位置API：需要网络连接获取定位服务
常见问题解答
Q1：如何在本地测试离线应用？
A：将网页文件与manifest.appcache放在同一目录，通过双击HTML文件或使用file://协议在浏览器打开，建议使用Chrome等支持度较好的浏览器。
Q2：LocalStorage和SessionStorage有什么区别？
A：localStorage数据永久保存直到手动清除，而sessionStorage在页面会话结束（标签页关闭）时自动清除，两者都不参与网络传输
