浅谈常见浏览器缓存方法(前端缓存)
浏览器缓存时浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度.
前端缓存可分为两大类:http缓存和浏览器缓存
一.http缓存
http缓存指的是:当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要求资源"的副本,就可以直接从浏览器缓存中提取,而不是从原始服务器中提取这个资源
常见的htttp缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力,
http缓存都是从第二次请求开始的,第一次请求资源时,服务器返回资源,并在respone hearder头中回传资源的缓存参数,第二次缓存请求时,浏览器判断这些请求参数,命中强缓存就直接200,否则就把请求参数加到request header头中传给服务器,看是否命中协商缓存,命中则返回304否则服务器会返回新的资源
为什么要使用HTTP缓存
使用http缓存的好处主要有以下极端
1.减少冗余的数据传输,节省了网费
2.缓解了服务器的压力,大大提高了网站的性能
3.加快了客户端加载网页的速度
二.WebSql
当前除了火狐以外,市场上的主流浏览器大都支持WebSql,Web Sql数据库API在HTML5之前就已经存在了,并以独立规范的形式出现,它并不是HTML5标准
WebSql主要特点:
将数据以数据库的形式存储在客户端,按需读取
数据便于检索,允许使用sql语句
可以使浏览器实现小型数据库存储功能
WebSql常用API
openDatabase //打开已存在的数据库,如果不存在,则会新建一个新的数据库
transaction //控制一个十五,以及这种情况执行提交或回滚
executeSql //执行SQL语句三.indexedDB
背景
随着浏览器功能不断增强,越来越多的网站开始考虑,将大量数据存储在客户端,这样可以减少从服务器获取数据,直接从本地获取数据
现有的浏览器数据存储方案,都不适合存储大量数据:Cookie的大小不超过4KB,且每次请求都会发送回服务器; LocalStorage 在 2,5MB到10MB之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引,所以需要一种新的解决方案,这就是IndexedDB诞生的背景
特点
通俗地说,IndexedDB就是浏览器提供的本地数据,它可以被网页脚本创建和操作,indexedDB允许储存大量数据,提供查找接口,还能建立索引. 这些都是LocalStorage所不具备的.就数据库类型而言,IndexDB不属于关系型数据库(不支持SQL查询语句),更接近NoSQL(非关系型数据库)
IndexedDB具有以下特点
1)键值对储存 : IndexedDB 内部采用对象仓库(object store)存放数据,所有类型的数据都可以直接存入,包括JavaScript对象. 对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的逐渐,主键都是独一无二,不能有重复,否则会抛出一个错误
2)异步 indexedDBd操作时不会锁死浏览器,用户依然可以进行其他操作,这与LocalStorage形成对比,后者的操作是同步的.同步设计师为了防止大量数据的读写,拖慢网页的表现
3)支持事务 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况
4)同源限制 IndexedDB收到同源限制,每一个数据库对应创建它的域名,网页只能访问自身域名下的数据库,而不能访问跨域的数据库
5)储存空间大 indexedDB 的储存空比LocalStorage大得多,一般来说不少于250MB,甚至没有上限
6)支持二进制储存 indexedDB不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer对象和Blob对象)
四.cookie
cookie指的就是会话跟踪技术,一般指网络为了辨别用户身份,进行session而存储在本地用户终端上的数据,cookie一般通狗http请求头发送到服务器.cookie主要特点有
1)跨域限制,同一个域名下多个网页内使用
2)cookie可以设置有效期,超出有效期自动清除
3)cookie存储大小在4KB以内
4)cookie的存储不能超过50个cookie
5)只能存储字符串类型
cookie常用的操作
setMaxAge //设置cookie的有效期,时间单位时秒,负责时表示关闭浏览器就失效,默认值为-1
setDomain //用于指定,只有请求指定域名才会带上该cookie
setPath //只有访问该域名下的cookieDemo的这个路径才会带上cookie
setValue //重置value五.localStorage
localStorage 是HTML5的一种新的本地缓存方案,目前使用比较多,一般存储ajax返回数据,存储特点主要有
1)数据可以长久保存,没有有效期,直到手动删除位置
2)存储的数据量大,一般5M以内
3)存储的数据可以在同一个浏览器的多个窗口使用
4)存储的数据不会发送到服务器
localStorage常用API
localStorage.setItem(key,value)//保存数据
localStorage.getItem(key) //获取数据
localStorage.removeItem(key)//删除单个数据
localStorage.clear()//删除全部六.sessionStorage
sessionStorage与上述localStorage类似,它的特点主要有
1)关闭对应浏览器标签或窗口,会清除对应的sessionStorage,与网页窗口有相同的生命周期
2)可以存储的数据大小5M
3)存储的数据不会发送到服务器
sessionStorage常用的API
sessionStorage.setItem(key,value)//保存数据
sessionStorage.getItem(key)//获取数据
sessionStorage.removeItem(key)//删除单个数据
sessionStorage.clear()//删除全部七.application cache
application cache是离线缓存技术,将大部分的图片,js.css等资源放在mainfest文件配置中,页面打开时通过mainfest文件读取本地文件或请求服务器资源,通常用于静态页面的缓存
application cache特点:
1)mainfest文件必须有变化时才会更新
2)当网路断开时,可以继续访问页面
3)文件缓存到本地,不需要每次都从网络上请求
4)稳定性比较好,遇到网络故障或服务器故障可以继续访问本地缓存
5)加载速度快,缓存资源为本地资源,因此加载速度快
八.cacheStorage
cacheStorage表示cache对象的存储,该接口提供serviceWorker或其他类型的工作线程或window范围的所有命名缓存的主目录
九.flash缓存
flash缓存也是页面通过js调用flash读写特定的磁盘目录,达到本地数据缓存的目的,这是要基于flash的,所以基本不用