web离线应用基础使用详解

离线应用

1.0 离线应用说明

支持离线Web应用是一个重点，离线就是在设备没有网络的情况下依然可以运行的运用；前端开发人员一直希望Web应用可以和传统客户端应用(pc端)同场竞技，PC端应用一个很重要的特点就是在没有网的情况下也能正常使用，所以前端应用也要做到这一点；

1.1 离线检测

如果要开发离线应用，首先应该知道设备是否处于离线状态下，JavaScript中的navigator.onLine属性存储了这个状态，离线还是联网；如果返回true则联网，否则离线；

if(navigator.onLine){
    // 进入这里说明为 true，联网中
    alert('联网中');
}else{
    // 进入这里说明false，离线中
    alert('离线中');
}

这还不够，我们还得监视网络状态改变，如果突然从联网状态变成了离线状态，离线应用就要开始运行使用，所以我们还要监视网络状态，使用window全局对象上的addEventListener方法；online是联网，offline是离线

window.addEventListener('online',function(){
    // 当从  离线变成联网这个瞬间，触发该函数
    alert("网络重新连接了！！");
});

window.addEventListener('offline',function(){
    // 当从  联网变成离线这个瞬间，触发该函数
    alert("网络断开了。。。");
});

1.2 数据存储

这里只介绍一种简单的数据存储方式，localStorage

1.21 localStorage

localStorage把数据存储在本地里，所以不会过期，除非人为删除才会消失
大小为5M
只能存储字符串

localStorage存储数据就是存储在localStorage对象上，作为对象的数据一直保存下来；

所以可以使用以下方式存储、读取数据

// local.js
// 存储数据
localStorage.name = '过青年';
localStorage.age = 20;
// 读取数据
console.log(localStorage.name);
console.log(localStorage.age);

当然，官方定义了正规的方法用于存储、读取、删除等

//local2.js
localStorage.setItem(name,'过青年');//存储
//localStorage.getItem("name");//读取
//localStorage.removeItem("name"); 删除

使用html引入，运行；运行后F12打开开发者工具–>存储–>本地存储，可以看到数据已经储存；现在我们可以把存储数据的语句删掉，继续在浏览器打开，查看本地存储，数据依然在那里，没有消失，除非我们使用removeItem()或者delete删掉这个属性，否则不会消失；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用local storage</title>
</head>
<body>
    <script src="./local2.js"></script>
</body>
</html>