HTML5离线功能：
离线资源缓存
在线状态检测
本地数据存储
离线web比普通web多了一个描述文件，用来列出需要缓存和永不缓存的资源，以备离线时使用，描述文件扩展名为“.manifest"或".appcache",推荐使用后者。描述文件的mime-type类型为”text/cache-manifest“。
main.html
<html> <head> <meta charset="utf-8" /> <title>notebook</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h2> write anytime--save anytime </h2> <div> <textarea id="content" cols="100" rows="20"></textarea> </div> <script src="main.js"></script> </body> </html>
现在要把这个web应用离线化，只需将main.html和manifest描述文件关联起来即可
<html manifest="./offline.appcache">
在HTML标签上添加manifest属性后，浏览器会自动下载offline.appcache文件并解析，然后缓存文件中的指定资源。下次就可以离线打开这个页面。但是离线下做出的改动并没有保存，所以还需要做数据的本地存储
main.js
//获取记录内容的文本域 var el = document.querySelector('#content'); //为文本域dom节点添加blur事件 el.addEventListener('blur', function () { //获取文本域内容 var data = el.value; //如果是在线，直接保存到服务器 if (navigator.onLine) { saveOnline(data); } else { //如果离线，则保存到本地 localStorage.setItem('data', data); } }); //监听上线事件 window.online = function () { //从本地获取数据 var data = localStorage.getItem('data'); if (!!data) { //如果数据存在，保存到服务器 saveOnline(data); //同时清空本地存储 localStorage.removeItem('data'); } }; //保存内容的具体代码 function saveOnline(data) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/savedata'); xhr.send('data=' + data); }