离线应用基础
0 Views 前端 with
本文字数:604 字 | 阅读时长 ≈ 3 min

离线应用基础

0 Views 前端 with
本文字数:604 字 | 阅读时长 ≈ 3 min

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

离线检测

avigator.onLine

1
console.log(navigator.onLine)

离线和在线事件

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的组成

web存储

Storage类型

方法

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')

IndexedDB

Index Database API

Dec 21, 2018