个人主页

# 9大缓存机制

# HTTP文件缓存

HTTP文件缓存是基于HTTP协议的浏览器端缓存机制。在文件重复请求的情况下，浏览器可以根据HTTP响应的协议头信息判断是从服务器端请求文件还是从本地读取文件，Chrome控制台下的Frames就可以查看浏览器的HTTP文件资源缓存列表内容

image

可以通过< meta >控制

<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />
<meta http-equiv="Cache-Control" content="max-age=7200" />
1
2

# localStorage

localStorage是H5的一种本地缓存方案，目前用于浏览器端体积较大数据的，需要了解的是，localStorage在不同浏览器中有长度限制且各不相同。

# sessionStorage

sessionStorage和localStorage类似，不过sessionStorage会在浏览器关闭后清空

cookie是网站为了辨别用户身份或session跟踪而存储在用户浏览器端的数据。cookie信息一般会通过HTTP请求发送到服务器端。一条cookie记录主要有键、值、域、过期时间和大小组成，一般用于保存用户的网站认证信息。 cookie主要分为两种，一种是session cookie，一种是持久性cookie，session cookie一般保存在内存里，关闭浏览器就消失。持久型cookie保存在硬盘内，直到失效日期。可以通过设置 HttpOnly来避免浏览器端操作cookie

# WebSQL

WebSQL是浏览器端用于存储较大数据的缓存机制，只有新版本的chrome支持，并以一个独立浏览器端数据存储规范的形式出现。

WebSQL主要有以下几个特点：

  1. WebSQL实际上不属于H5的部分，目前只是一种特定的浏览器特性，比H5出现还早
  2. WebSQL将数据以数据库二维表的形式存储，通过js读取。
  3. WebSQL特点，允许SQL语句的查询。
  4. WebSQL可以让浏览器实现小型数据库的功能，数据库集成在浏览器内。

image

三个核心方法： openDataBase()、transactio()和executeSql()

let db = openDatabase('mydatabase', '1.0', 'test table', 2*1024*1024)
let name = [2, 'ouven']
db.transaction(function(table){
    table.executeSql('create table if not exists t1 (id, unique, msg)')
    table.executeSql('insert into t1(id, msg) values (1, "hello")')
})

db.transaction(function(table){
    table.executeSql('SELECT * from t1',[], function(table, results){
        let len = results.rows.length, i
        for(i =0;i<len;i++){
            console.log(results.rows.item[i].msg)
        }
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# IndexDB

IndexDB也是一个可在客户端存储大量结构化数据并且能在这些数据上使用索引进行高性能检索的一套api。目前IndexDB属于W3C组织推荐，通常大小限制50M

image

# Application Cache

Application Cache 是一种允许浏览器通过manifest配置文件在本地有选择性的存储Javascript、css、图片等静态资源的文件级缓存机制。

image

# cacheStorage

cacheStorage是在ServiceWorker规范中定义的，可用于保存每个ServiceWorker声明的Cache对象，是未来可能用来代替Application Cache的离线方案。cacheStorage有open，match，has，delete，keys五个核心API方法，可以对Cache对象的不同匹配内容进行不同的相应，cacheStorage在浏览器端为window下的全局内置对象caches来操作。

使用示例

# Flash 缓存

flash缓存应用较少，主要给予网页端flash，具有读写本地目录的功能，同时也可以想JavaScript提供调用的API，这样页面就可以通过调用Flash去读写磁盘，达到缓存的目的。

# 总结

目前浏览器缓存实现的技术和方式较多，需要明白的是在项目中配置应用的只有http缓存、localStorage、Cookie，ServiceWorker可能将来会被使用，但兼容性还不是很好。

← 前端常见跨域解决方案 →