前端缓存之浏览器缓存（一）

浏览器缓存分为本地小容量缓存和本地大容量缓存

1.1 本地小容量缓存

小容量的缓存分别有cookie，localStorage，sessionStorage。

• cookie：数据存放在客户的浏览器上，每次请求的时候内容会自动传送到服务器，但是cookie的大小是受限的 ，不同浏览器对cookie的大小并不统一，多余的会被截掉。因此，cookie比较浪费带宽，不建议写入太多内容。cookie一般在4-10kb。

• localStorage：用于持久化的本地存储，会把内容一直存在浏览器中，直到清除浏览器的缓存。没有清除浏览器缓存，则数据会永久存储在浏览器中。localStorage一般在5M左右。

• sessionStorage：用于在本地存储一个会话(session)中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毁。因此，sessionStorage并不是一种持久化的本地存储，仅仅是会话级别的存储。sessionStorage一般也是在5M左右。

  虽然cookie为持久保护客户端数据提供了方便，分担了服务器存储的负担，但是还是有一定局限性，例如每个特定的域名下最多生成20个cookie。除了数量和长度有限制，cookie还存在着安全性问题，如果cookie被拦截了，就可以取得所有session信息。别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到这个问题，可以使用session。session会在一定时间内保存在服务器上，当访问增多时，会占用较多服务器的资源。（这时候又要考虑使用cookie）所以，建议将登陆信息等重要信息放在session中，把其他信息存放在cookie中。另外，cookie还需要指定作用域，不可以跨域调用。

  当然，我们也可以通过加密和安全传输技术(SSL)，降低cookie被破解的可能性，也可以控制cookie的生命周期，使之不会永远有效，那么他人获得的很可能是一个过期的cookie。

1.2 本地大容量换缓存

大容量缓存分别有WebSql和IndexDB。

• WebSql：一个在浏览器客户端的结构关系数据库，是浏览器本地RDBMS（关系型数据库管理系统），可以使用Sql查询。

• IndexDB：保存的是对象类型的数据。

1.3 PWA

这里只对PWA做一个简单介绍

PWA(progressive web app)弥补了APP和Web网页存在的一些缺点，主要是像APP一样，很多内容可以缓存到本地，实现了离线缓存的功能，即使手机没有网络，依然可以实现一些离线功能。