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>
posted @ 2020-07-16 22:59  过青年  阅读(49)  评论(0编辑  收藏