cookie，sessionStorage，loclaStorage，HTML5应用程序缓存

cookie

Cookie 是一些数据，由服务器生成，发送给浏览器，一旦用户从该网站或服务器退出，Cookie 就存储在用户本地的硬盘上，下一次请求同一网站时会把该cookie发送给服务器。Cookie的作用就是用于解决“如何记录客户端的用户信息”。

可以使用 document.cookie 属性来创建、读取、及删除 cookie。

创建 cookie ：

document.cookie="username=Irelia;
为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=Irelia; expires=Thu, 19 Dec 2025 12:00:00 GMT";
path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=Irelia; expires=Thu, 19 Dec 2025 12:00:00 GMT; path=/";

Cookie的缺陷

这个数据本质是存储在当前页面的内存中，为页面会话期间可用的每个给定源维护一个单独的存储区域（只要浏览器处于打开状态，包括页面重新加载和恢复）

方法：

1.存储的内容一般为5MB

2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据

3.永久生效，他的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除，如果想清除，必须手动清除

方法：

SessionStorage与LocalStorage都属于Web Storage提供的API

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie 一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage 会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些原生方法，数据操作比cookie方便；

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

应用程序缓存为应用带来三个优势：

如果你还想对HTML5应用程序缓存有更多的了解，可以看看这个https://www.w3school.com.cn/html5/html_5_app_cache.asp