1.‘古老的前端缓存方法’cookie
cookie是我们所熟知的，也作cookies。cookie是存储在用户本地终端上的数据。某些网站为了点别用户身份，进行session跟踪而存储在本地终端上的数据。cookie存储通常是进过加密处理的，它可以存放大概4k左右的内容；我们可以设置cookie的有效期，有效期内缓存一直存在，默认的缓存的时间是浏览器关闭即销毁。而且我们“可爱的小甜点”缓存在每次的http请求和响应中都会被添加到请求头，所以会造成一定的流量损失。
应用：判断用户是否登录，针对登录过的用户，服务端会在他登录时插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录过。
示例：
2.webStorage
webStorage分为localStorage和sessionStorage。
localStorage是没有时间限制的数据存储。把数据通过localStorage存在本地，如果不手动清除的话，存的数据会一直在这个地方存着，直到“天荒地老，海枯石烂.....”localStaorage一般用于管理购物车、存储H5游戏的一些数据。
sessionStorage是会话存储，针对当前会话所做的一个存储。它的生命周期相对较短，当浏览器关闭的时候，它的生命就终结了。当我们遇到一些内容特别多的表单为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写，这个时候我们一般会使用sessionStorage。
相对于cookie，webStorage的存储空间要大的多，可以存储大约5MB左右的内容，而且该存储不会与服务端发生通讯。
示例：
cookie与webStorage对比图
注意：不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
前边介绍的方法主要用于存一些简单的键值数据，如果我们需要处理大量结构化数据的存储的时候该怎么办？h5为我们提供了一些其他方法，web SQL、IndexedDB
3.web SQL DataBase
webSQL ：使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。
Web SQL Database 规范中定义的三个核心方法：
openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executeSql：这个方法用于执行SQL 查询
但是在W3C官网上已经声明该规范已经停止了，也就是说这是一个废弃的标准。。。。
示例：
4. IndexedDB
IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法，是 WebSQL 数据库的取代品。MDN上完整的API文档可供学习。IndexedDB存储是按索引进行存取删除的，所以如果要从缓存中查找数据只能是根据索引来查找，而没办法根据内容进行全局搜索。
IndexedDB有一定的局限性，以下情况不适合使用IndexedDB
a. 全球多种语言混合存储。国际化支持不好。需要自己处理。
b. 和服务器端数据库同步。你得自己写同步代码。
c. 全文搜索。
注意，在以下情况下，数据库可能被清除:
a. 用户请求清除数据。
b. 浏览器处于隐私模式。最后退出浏览器的时候，数据会被清除。
c. 硬盘等存储设备的容量到限。
d. 不正确的
e. 不完整的改变.
示例：参考文章http://www.tfan.org/using-indexeddb/
上边所述的存储都是做一些本地存储，有时候我们还会开发一些网页应用，对 HTTP响应做缓存的。这时候application Cache、Cache storage就是比较专业的缓存技术。我们前边的所做的本地存储只是把数据存储在本地，如果服务端数据有变化的话，我们需要手动写函数去检测更新。而application Cache、Cache storage做了缓存后，每次加载页面，会自动问询服务端是否有更新，如有就会自动更新数据。
5.application Cache
application cache是应用缓存机制，他使我们的应用可以离线缓存。
使用应用缓存可以得到以下益处：
a. 离线浏览: 用户可以在离线状态下浏览网站内容。
b. 更快的速度: 因为数据被存储在本地，所以速度会更快。
c. 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。
但是因为这个问题比较多，因为采用mainfest，所以你将不能清空缓存，只能进行更新，如果更新到错误的版本，而又没办法调到正确的页面的话，就悲剧了。。。现在官网已经发文已废弃，该特性已经从web标准中删除了。
6.cache storage
CacheStorage是在ServiceWorker的规范中定义的，它用来存储 Response 对象的。也就是说用来对 HTTP响应做缓存的。对于Service Worker，它的运行不走JavaScript线程，在浏览器背后默默运行，脱离浏览器窗体，因此，window以及DOM都是不能访问的；专为异步API设计，同步API是不能在Service Worker里使用；Service Worker要求必须是https协议的，但本地开发也弄个https协议是很麻烦的，好在还算人性化，Service Worker在http://localhost或者http://127.0.0.1这种本地环境下的时候也是可以跑起来的。
网友评论