Web离线检测
想要进行Web端的离线应用的实现，首先需要对设备目前处于的网络环境进行判断，HTML5为此定义了navigator.onLine属性来检测设备是否处于离线或者联网状态，navigator.onLine属性会返回一个Boolean值。如果是true则表示处于联网状态，如果是false则表示处于离线状态，用户可以通过设定该属性，读取返回值来判断设备目前处于的状态
除了navigator.onLine属性之外，HTML5还定义了online和offline事件来判断设备处于的状态，当网络从离线变为在线时，会触发online事件，当网络从在线变为离线时，会触发offline状态，这两个事件都是定义在window对象中的，所以可以通过window.ononline或window.onoffline来调用（注意：这两个事件目前只有IE8到IE10和firefox3.0+支持）
HTML5离线应用
HTML5离线应用（application cache）简称appcache，是专门为开发Web离线应用而设计的，Appcache就是专门从浏览器的缓存中分出来一块缓存区，如果想要在这个缓存区中保存缓存文件，可以通过使用一个描述文件（manifest file）来罗列出想要缓存的文件或者资源，下面是一个简单的manifest file实例
CACHE MANIFEST
（文件的首行必须为CACHE MANIFEST）
CACHE:
app.js
app.css
bridge_1.jpg
想要将该描述文件添加到页面中进行缓存处理，可以通过在html标签中嵌入的方法
<html manifest="demo.appcache"></html>
这样页面在第二次刷新或者处于离线状态时，就会从该描述文件中读取罗列的文件缓存进行加载
Web存储机制
Web Storage 最早是在Web超文本应用技术工作组的Web应用1.0规范中描述的。这个规范最终成为了HTML5的一部分，通过Web Storage可以克服Cookie带来的一些限制。
使用Cookie
1、使用cookie的时候，浏览器为了确保缓存的数据不会占据太多的磁盘空间以及cookie被恶意利用，所以对于cookie的数量做了限制。
2、在使用cookie存储数据时，很多时候都需要通过服务器端发送带有cookie数据的请求头。
3、利用javascript处理浏览器中存储的cookie值是一件非常麻烦的事情，通过BOM的document.cookie获取的是一个包含所有cookie值的字符串，如果cookie数据过多的话，分割字符串又会是一个附加的工作量。
使用Web Storage
1、可以直接存储在浏览器中，而不需要通过与服务器之间的数据通信来保存数据。
2、能够提供大量的数据存储空间来保存需要存储的数据。
3、Web Storage提供了更加丰富的接口来对存储数据进行操作，使保存的数据能被更加灵活方便的使用。
sessionStorage对象
使用sessionStorage对象存储特定于某个会话的数据，该数据可以保存到浏览器关闭之前，同时通过sessionStorage对象存储的数据可以跨页面刷新进行访问，同时如果浏览器支持，可以在页面崩溃重启之后继续存在（firefox和Webkit内核的浏览器支持，IE不支持）
//使用方法存储数据
sessionStorage.setItem("name","xiaohong");
//使用属性存储数据
sessionStorage.name = "xiaohong";
//使用方法读取存储的数据
let name_ = sessionStorage.getItem("name");
//使用属性读取存储的数据
let name_ = sessionStorage.name;
//使用方法删除一个存储数据
sessionStorage.removeItem("name");
localStorage对象
localStorage对象在修订过的HTML5规范中作为可以持久保存客户端数据的方案取代了globalStorage对象。通过localStorage对象存储的数据可以持久保存，即使关闭浏览器数据也不会消失。要访问一个localStorage对象，页面之间必须要处于同一个域，同一个端口，同一个协议中。
//使用方法存储数据
localStorage.setItem("name","xiaohong");
//使用属性存储数据
localStorage.name = "xiaohong";
//使用方法读取存储的数据
let name_ =localStorage.getItem("name");
//使用属性读取存储的数据
let name_ = localStorage.name;
//使用方法删除一个存储数据
localStorage.removeItem("name");
网友评论