13.离线应用与客户端存储

1.离线检测

属性navigator.onLIne

事件：online和offline

2.数据存储

2.1 cookie

  用于在客户端存储会话信息，web服务器需要在大量的请求中区别出哪些是来自同一个会话，所以客户端在发送请求时需要发送能够表明其身份的标识。
  Cookie 会根据从服务器端发送的响应报文内的一个叫做Set-Cookie的首部字段信息，通知客户端保存Cookie。当下次客户端再往该服务器发送请求时，客户端会自动在请求报文中加入Cookie 值后发送出去。
  服务器端发现客户端发送过来的Cookie 后，会去检查究竟是从哪一个客户端发来的连接请求，然后对比服务器上的记录，最后得到之前的状态信息。

2.2 session

  用于在服务器端存储会话信息。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的网页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。
  当服务器要为某个客户端的请求创建一个session时，服务器先检查客户端的请求里是否包含了sessionId,如果已经包含了，服务器就根据sessionId将session检索出来使用；如果不包含sessionId，服务器就创建一个session，并生成一个与此相关联的sessionId，这个sessionId会在本次响应中返回给客户端保存。下次发送请求的时候就会带上sessionId。

2.3 Web存储机制

Web Storage的目的是当数据被严格控制在客户端上时，无需持续的将数据发回服务器。
1）Storage对象

Storage对象方法

2）sessionStorage对象
存储特定于某个会话的数据，该数据只保持到浏览器关闭。
存储在sessionStorage的数据可以跨越页面刷新而存在。

• 存储数据

sessionStorage.setItem("name","Nicholas");
sessionStorage.book="world";

• 读取数据

let name=sessionStorge.getItem("name");
let book=sessionStorage.book;

可以利用sessionStorage.length来遍历。
3） globalStorage对象
跨越会话存储数据，但有特定的访问限制。
要使用globalStorage，首先要指定哪些域可以访问该数据。

如果事先不能确定域名,使用location.host。

4） localStorage对象
localStorage对象在html5中替代了globalStorage。
要访问同一个localstorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，同一个端口。相当于globalStorage[location.host]。数据保留到JavaScript删除，或者清除浏览器缓存。

为了兼容只支持globalStorage的浏览器，可以使用以下函数。