Fork me on GitHub

离线应用基础

本节主要讲述离线应用基础

离线检测

avigator.onLine

1
console.log(navigator.onLine)

离线和在线事件

  • online
  • offline
1
2
3
4
5
6
7
window.addEventListener('online', function() {
console.log("在线")
})

window.addEventListener("offline", function() {
console.log("离线")
})

应用缓存

appcache

appcache是从浏览器额缓存中分出来的一块缓存区

数据存储

客户端用于存储回话信息

  • 响应头
1
2
3
4
5
6
7
8
9
10
11
HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 17214
Content-Type: application/json; charset=utf-8
Date: Mon, 24 Sep 2018 02:02:05 GMT
Rate-Limit-Remaining: 0
Rate-Limit-Reset: 1537754526
Rate-Limit-Total: 2
Server: Tengine
Vary: Accept, Origin
X-Request-Id: 458cd1b6-6be4-421a-a5e3-81da6e8f645
  • 请求信息
1
2
3
GET /mock/5b5146a4fe14b078aee5b183/movie/SoonMovie HTTP/1.1
Accept: application/json, */*
Content-Type: application/json

cookie的组成

  • 名称:name,不区分大小写
  • 值:经过URL编码
  • 域:www.xxx.comm
  • 路径
  • 失效时间
  • 安全标识

web存储

Storage类型

方法

  • clear():删除所有值
  • getItem(name):根据指定的名字name获取对应的值
  • key(index):获得index位置处的值的名字
  • removeItem(name):删除由name指定的键值对
  • setItem(name,value):为指定的name设置一个对应的值

sessionStorage

存储特定为某个回话的数据,也就是说该数据只保持到浏览器关闭,浏览器关闭就会消失

存储数据

1
2
sessionStorage.setItem("name", "Qian")
sessionStorage.book = "Profession"

读取数据

1
2
3
4
5
var storage = document.getElementById("storage");

sessionStorage.setItem('name', 'Qian')

storage.innerHTML = sessionStorage.getItem("name")
结合lengthkey()方法读取数据
1
2
3
4
5
6
7
8
9
10
11
var storage = document.getElementById("storage");

for (var i = 0; i < 10; i++) {
sessionStorage.setItem("name" + i, i)
}

for (var i = 0; i < 10; i++) {
var key = sessionStorage.key(i);
console.log(sessionStorage.getItem(key))
}
storage.innerHTML = sessionStorage.getItem("name")

删除数据

1
2
3
for (var i = 0; i < 10; i++) {
sessionStorage.removeItem('name' + i);
}

globalStorage

这个对象的目的是跨越会话存储数据,但有特定的访问限制

要使用这个对象,首先要指定哪些域可以访问该数据

localStorage

这个对象以取代globalStorage

要访问local Storage,页面必须来自同一个域名,使用同一个协议,端口

1
2
3
localStorage.setItem("name", "Qian")

document.getElementById("storage").innerHTML = localStorage.getItem('name')
  • 数据保存到通过js删除或者是用户清楚浏览器缓存

IndexedDB

Index Database API

  • 操作是异步的,因此,大多数操作会以请求方式进行,但这些操作会在后期执行,然后如果成功则返回结果