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的缺陷

cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
由于在HTTP请求中的cookie是明文传递的，所以安全性成问题。（除非用HTTPS)
Cookie的大小不能超过4kb。对于复杂的存储需求来说是不够用的。

MDN链接：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies

sessionStorage

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

仅为会话存储数据，这意味着在关闭浏览器（或选项卡）之前存储数据。
数据永远不会传输到服务器。
存储限制大于cookie（最多5MB）。

方法：

setItem(key ，value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，通过指定名称的key获取对应的value值
removeItem(key)：删除数据，通过指定名称key删除对应的值
clear() ：清空存储的内容

loclaStorage

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

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

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

方法：

setItem(key ，value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，通过指定名称的key获取对应的value值
removeItem(key)：删除数据，通过指定名称key删除对应的值
clear() ：清空所有存储的内容

WebStorage

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应用程序缓存

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

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

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

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