web离线笔记本

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);
}

 

posted @ 2021-02-05 23:37  XXXSANS  阅读(163)  评论(0)  编辑  收藏  举报