浅谈前端缓存类型之浏览器缓存

缓存分类查看浅谈前端缓存类型之http缓存。
由上篇文章可以知道浏览器缓存分为本地存储和默认缓存:

一、本地存储

本地存储包括WebStorage、Cookie、WebSql、IndexDB、应用缓存（Application Cache）、PWA。

1、WebStorage

WebStorage分类

WebStorage包括了两种存储方式：sessionStorage和localStorage

localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；

sessionStorage：会话存储，用于本地存储一个会话（session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。

localStorage 和 sessionStorage都是window对象的属性。

WebStorage浏览器支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){
alert("浏览支持localStorage")
}
else
{
alert("浏览暂不支持localStorage")
}
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

API

1，保存数据到本地

sessionStorage.setItem('key', value) //name 是本地存储的值的名字， value是本地存储值，注意value必须是字符串的形式

localStorage.setItem('key', value) //setItem把值存到本地，其中name 是本地存储的值的名字， value是本地存储值，注意value必须是字符串的形式

2，从本地获取数据

var data1 = JSON.parse(sessionStorage.getItem('key'));

var data2 = JSON.parse(localStorage.getItem('key'));

3，从本地删除某个数据

sessionStorage.removeItem('key');

localStorage.removeItem('key');

4，删除所有保存在本地的数据

sessionStorage.clear();

localStorage.clear();

2、Cookie

cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。

会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式。

3、WebSql

h5 的浏览器客户端存储可以使用websql存储引擎，现在 chrome和safari支持：

Html5数据库API是以一个独立规范形式出现，它包含三个核心方法：

1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。

var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase接收五个参数：

数据库名字
数据库版本号
显示名字
数据库保存数据的大小（以字节为单位 )
回调函数（非必须)

如果提供了回调函数，回调函数用以调用 changeVersion() 函数，不管给定什么样的版本号，回调函数将把数据库的版本号设置为空。如果没有提供回调函数，则以给定的版本号创建数据库。

2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数

包含事务内容的一个方法
执行成功回调函数（可选）
执行失败回调函数（可选）

db.transaction(function (context) {
           context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
           context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
           context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
           context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
         });

这个例子中我们创建了一个table，并在表中插入三条数据，四条执行语句任何一条出现错误，整个事务都会回滚。

3、executeSql：这个方法用于执行真实的SQL查询。
executeSql方法用以执行SQL语句，返回结果，方法有四个参数

查询字符串
用以替换查询字符串中问号的参数
执行成功回调函数（可选）
执行失败回调函数（可选）

在上面的例子中我们使用了插入语句，看个查询的例子

db.transaction(function (context) {
           context.executeSql('SELECT * FROM testTable', [], function (context, results) {
            var len = results.rows.length, i;
            console.log('Got '+len+' rows.');
               for (i = 0; i < len; i++){
              console.log('id: '+results.rows.item(i).id);
              console.log('name: '+results.rows.item(i).name);
            }
         });

完整示例




    Web SQL Database

4、IndexDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

IndexedDB 具有以下特点。

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

具体查看浏览器数据库 IndexedDB 入门教程

5、应用缓存（Application Cache）

Application Cache是HTML5的新特性，允许浏览器在本地存储页面所需要的资源，使得页面离线也可以访问。
优点有如下几点：

离线浏览: 用户可以在离线状态下浏览网站内容。

更快的速度: 因为数据被存储在本地，所以速度会更快。

减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

具体使用查看前端性能优化（Application Cache篇）

6、PWA

PWA 它不是特指某一项技术，而是应用多项技术来改善用户体验的 Web App，其核心技术包括 Web App Manifest，Service Worker，Web Push 等，用户体验才是 PWA 的核心。

PWA 主要特点如下：

可靠 – 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现
用户体验 – 快速响应，具有平滑的过渡动画及用户操作的反馈
用户黏性 – 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验

PWA 本身强调渐进式（Progressive），可以从两个角度来理解渐进式，首先，PWA 还在不断进化，Service Worker，Web App Manifest，Device API 等标准每年都会有不小的进步；其次，标准的设计向下兼容，并且侵入性小，开发者使用新特性代价很小，只需要在原有站点上新增，让站点的用户体验渐进式的增强。

Google 在官网一篇名为《Progressive Web App Checklist》的文章中给出了 PWA 的基准线，也给出了体验更好的示范性 PWA 的 Checklist，下面列出了 PWA 的最低要求。

站点需要使用 HTTPS
页面需要响应式，能够在平板和移动设备上都具有良好的浏览体验
所有的 URL 在断网的情况下有内容展现，不会展现浏览器默认页面
需要支持 Wep App Manifest，能被添加到桌面
即使在 3G 网络下，页面加载要快，可交互时间要短
在主流浏览器下都能正常展现
动画要流畅，有用户操作反馈
每个页面都有独立的 URL

二、默认缓存

浏览器存在默认缓存行为，根据浏览器不同默认缓存不一样，火狐浏览器默认【缓存时间=(访问时间-变更时间）/ 10 】

最新版本Nginx默认在resquest headers中返回Etag值，所以导致静态文件被缓存。