本地储存和离线储存

HTML中的储存方式

1.本地储存

数据存储在用户浏览器中，设置、读取方便、甚至页面刷新不丢失数据。两种储存方式容量较大，sessionStorage约20M、localStorage约5M，只能存储字符串，可以将对象JSON.stringify() 编码后存储。

1.1 window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

1.2 window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

1. 以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有都清除掉)

localStorage.clear()

1.3 案例参考：《ToDoList》

2.离线储存

在用户没有联网的时候可以正常访问网点，连网的时候更新缓存文件。

原理：

基于一个新建的.appcache文件的缓存机制（不是储存技术），通过这个文件上的解析清单来离线储存资源，当网络处在离线状态时，浏览器就会通过被离线的数据进行页面展示。

文件结构：

CACHE MANIFEST
#所要缓存的资源文件
/index.html

NETWORK:
#不要缓存的文件
/index.css

FALLBACK:
#找不到缓存文件后的资源
/404.html

离线缓存机制：

当用户第一次访问网站时，浏览器会发现html的manifest属性，会按照文件的相应要求，离线缓存对应文件，当再次访问app，浏览器就会按照相应的目录直接加载文件资源。再进行对比，看是否manifest文件被更新，未改变则就不再进行操作，若进行了更新则就重新下载对应文件。