web前端存储方式

cookie

cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。

当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。对于那种设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中。
特点：

1. 不同的浏览器存放的cookie位置不一样，也是不能通用的。
2. cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。
3. 我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
4. 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
5. 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
6. cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁

存储cookie：

cookie.set('key','value')           
cookie.set({key1:'value1',key2:'calue2'})    

获取cookie：

cookie.get('key')
cookie.get(['key1','key2'])

清除cookie：

cookie.remove('key')
cookie.remove('key1'，'key2')
cookie.remove(['key1','key2'])

HTML5之前应用程序只能存储在cookie中，包括每个服务器请求。
本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
HTML的本地存储优于cookies。
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
本地存储分为localstorage和sessionstorage。

本地存储localstorage

用于存储一些长时间的变量
IE8以上浏览器兼容
特点：

1. 生命周期：持久化的本地存储，浏览器被关闭时数据不会被删除（除非主动删除数据，否则数据是永远不会过期的）。
2. 存储的信息在同一域中是共享的。
3. 大小为5M（和浏览器厂商有关）
4. localStorage受同源策略的限制

本地存储sessionstorage

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
用于存储临时变量的值。
sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。
cookie、localStorage、sessionStorage区别
相同点：在本地（浏览器端存储数据）
不同点：

1. localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
2. sessionStorage除了协议、主机名、端口相同外，还要求在同一窗口（也就是浏览器的标签页）下才能读取到同一份数据。
3. localStorage是永久存储，除非手动删除。
4. sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
5. cookie的数据会在每一次发送http请求的时候，同时发送给服务器，而localStorage、sessionStorage不会。

应用程序缓存Application Cache

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。
优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源