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>
分类:
ES5
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡