浏览器缓存时浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度.

前端缓存可分为两大类: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的,所以基本不用

浅谈常见浏览器缓存方法(前端缓存)相关推荐

java缓存同步_浅谈JSON的数据交换、缓存问题和同步问题
JSON轻量级的数据交换格式相对于XML来说,JSON的解析速度更快,文档更小. JSON的格式 {属性名:属性值,属性名:属性值,--} 属性名的类型可以是string,number,boolea ...
java中virtual关键字_浅谈virtual、abstract方法和静态方法、静态变量理解
说点对这几个容易混淆的词的理解: 1.c++中的virtual方法的 virtual关键字主要是防止继承中重复继承父类的同一个方法而设置的标识. 2.virtual与abstract关键字的不同之处在 ...
微信html页面缓存问题,浅谈微信页面入口文件被缓存解决方案_简单_前端开发者...
缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式, 一般情况 1.添加版本号,在静态 l ...
js打开服务器缓存文件夹路径,浅谈微信页面入口文件被缓存解决方案
缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式, 一般情况 1.添加版本号,在静态资源 ...
计算机节约ip,浅谈节约IP地址方法.doc
浅谈节约IP地址的方法刘荣欢 (理学院信计0701 lrhbsym@126.com) 摘要:随着Internet技术的发展及现代用户计算机的增多,原先以Ipv4标准的IP地址分配以存在严重的空间 ...
浅谈JVM(六)：方法调用过程
上一篇: 浅谈JVM(一):Class文件解析浅谈JVM(二):类加载机制浅谈JVM(三):类加载器和双亲委派浅谈JVM(四):运行时数据区浅谈JVM(五):虚拟机栈帧结构 6.方法调用过程 ...
台式计算机主控芯片型号,浅谈常见SSD主控以及芯片
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 299段,最近有两个选择,麦克赛尔以及影驰很多时候见到,60G,64G产品并存,120G,128G产品并存.其实是因为,缓存和非缓存的原因而已大家其实都明 ...
景联文科技|浅谈常见的语音标注方法
语音标注是数据标注行业中一种比较常见的标注类型. 语音标注的主要工作内容是将语音中包含的文字信息.各种声音"提取"出来,再进行转写或合成,标注后的数据主要用于人工智能,应用在机器学 ...
前端开发：浅谈图片优化的方法
在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽.那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片 ...
浅谈常见的七种加密算法及实现（附代码）
1. 前言数字签名.信息加密是前后端开发都经常需要使用到的技术,应用场景包括了用户登入.交易.信息通讯.oauth 等等,不同的应用场景也会需要使用到不同的签名加密算法,或者需要搭配不一样的签名 ...

浅谈常见浏览器缓存方法(前端缓存)