前端协商缓存强缓存如何使用_前端缓存的使用姿势

前端缓存的使用姿势

Cookie、sessionStorage、localStorage 以及 IndexedDB

任 务

• [x] 什么是 cookies
• [x] cookies 的有效期、存储大小和作用范围、兼容性以及 http 特性
• [x] cookies 如何使用？
• [x] 什么是 localStorage
• [x] localStorage 的有效期、存储大小和作用范围、兼容性
• [x] localStorage 如何使用？
• [x] 什么是 sessionStorage
• [x] sessionStorage 的有效期、存储大小和作用范围、兼容性
• [x] sessionStorage 如何使用？
• [x] 什么是 IndexedDB
• [x] IndexedDB 如何使用？
• [x] ~~什么是 Web SQL~~
• [x] ~~Web SQL 如何使用？~~
• [x] Cookie、sessionStorage、localStorage、session 以及 IndexedDB 五者的区别
• [x] 如何选择合适的缓存方式？
• [x] 实际开发下如何使用?

---

相信大家在日常开发中都不可避免的使用到了缓存，在 php 下我们可能会使用 Redis 或 session 缓存用户信息 ，在客户端下我们可能会使用文件IO操作来实现缓存图片或账号密码 ，那么在前端 web 中我们是怎么使用缓存的呢？

相信大家已经想到了， cookies ？！

Cookies

没错， cookies 是一项应用非常广泛的前端缓存技术，它是服务器发给用户浏览器并保存在本地的一小块数据，它会在下次请求时自动携带上并发送回服务器，通常我们是用它来保持用户登录状态。

在服务器上，通过在响应头上添加 set-cookies 选项，客户端浏览器在收到此响应时，会自动保存起来。

Set-Cookie: yummy_cookie=choco; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

在前端页面上，我们通过 javascript 也可以操作 cookies

document.cookie = 'yummy_cookie=choco';

cookies 有几个重要的选项

| 属性 | 解析 | | :------: | :-------------------------------------------------------------------------------------: | | domain | 作用域名，默认为当前域名，如果需要共享 cookies，一般可以设置成顶级域名， .ijunhai.com | | path | 作用路径，默认是当前路径，如果需要共享，需要设置路径为 根路径 | | expires | 有效期，默认是浏览器关闭前有效，过期会自动清除 | | HttpOnly | 是否只允许 http 操作，禁止 js 操作，有在一定程度上能避免跨站脚本攻击 |

跨站脚本攻击（XSS）：被注入恶意脚本并执行恶意代码，一般在允许用户输入的站点上发生，如论坛

前面我们也说过，在发起请求时一般都会自动携带 cookies，这就占用一定的带宽资源。

那么除了最常见的 cookies ，还有其他什么缓存机制吗？

新的浏览器 API 已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。

更多缓存如, Http缓存, CDN缓存, Html5离线缓存manifest , 将不在本次分享中深入

localStoreage 本地存储

localStora