科百科
当前位置: 首页 范文大全

怎样清浏览器的缓存(说说浏览器有哪些缓存)

时间:2023-05-25 作者: 小编 阅读量: 2 栏目名: 范文大全

indexDB设计的操作完全是异步进行的。indexDB最大的特色是使用对象保存数据。cookies的基本思想就是让浏览器积累一组服务器特有的信息,并在客户端和服务器端来回传递。Cookies一般存在用户本地终端上,通常经过加密处理。Cookies一般通过http请求中的头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成。这两个都是windows对象的属性。不同的浏览器无法共享localStorage或sessionStorage中的信息。

一. 什么是缓存

web缓存是一个设备,这个设备可以自动保存常用的文档的副本。在客户端发起请求的时候,如果就近的缓存拥有客户端想要的副本,那么就会加快网站的响应速度。

在出现带宽不足、瞬间拥塞(很多用户同时访问某一站点)、距离时延(由于距离很远产生时延)这些情况下,缓存的优势就会体现出来了。

缓存可分为:私有缓存和公有缓存

私有缓存是个人缓存,包含单个用户最常用的页面。(浏览器的缓存是私有缓存)

公有缓存包含了某个用户团体的常用的页面。

二. 浏览器存储

浏览器存储(Browser Caching)是浏览器的一种优化机制。浏览器的缓存中保存了用户经常访问的一些文档的副本,避免了一些重复的网络请求,

浏览器能够快速地读取本地的数据,这样就会加快网站的访问速度。

1. 浏览器有哪几种缓存机制

浏览器一共有九种缓存机制

打开浏览器 -> 点击F12 -> 点Application

可以看到浏览器的多种缓存机制:

浏览器的几种缓存机制

(1). http缓存

http缓存是基于http协议的浏览器文件缓存机制,当重复请求某一个文件时,浏览器可以根据协议的头文件判断是从服务器端请求文件还是从本地读取文件。

上图中的Frames展示的就是http缓存

a. 判断过期的两种方式:

ExpiresCache-Control:max-age

Expires:存的是绝对的过期的日期(例如:牛奶的保质期)

Cache-Control:max-age 存的是还可以保鲜多久,是相对时间,用秒做单位

b. 如果a中判断缓存已经过期,那么就要进行缓存再验证

缓存再验证的两种方式:

请求报文里携带

If-Modified-Since:Date和If-None-Match

If-Modified-Since:Date 对修改日期进行验证

If-None-Match:<tags> 对实体标签的版本标识符进行验证

例如:

响应报文:

HTTP/1.1 200 OKLast-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"Content-Length: 12195

下一次的请求报文 :

GET /i/yahoo.gif HTTP/1.1Host: us.yimg.comIf-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMTIf-None-Match: "10c24bc-4ab-457e1c1f"

再次响应的报文:

HTTP/1.1 304 Not Modified

c. b中再验证的结果有两种:服务器中的文件未修改 和 服务器中的文件有修改

服务器中的文件未修改:缓存中的副本可以使用,那么浏览器直接从缓存读取文档,返回304

服务器中的文件有修改:缓存中的副本不能使用,那么直接从服务器端读取文档,返回200

(2). indexDB 客户端本地数据库(大型数据库)

indexDB是浏览器中的一种数据库,用来保存结构化数据。

indexDB设计的操作完全是异步进行的。

indexDB最大的特色是使用对象保存数据。

indexDB.open(“database”) 打开数据库 或者 创建并打开数据库;

indexDB.setVersion(“1.0”) 为数据库指定一个版本号;

database.transaction(); 创建事务,对数据库进行操作;

openCursor() 在对象存储空间上调用这个方法,通过游标查找数据;

createIndex() 创建索引;

indexDB的并发问题;

(3). Cookies

1.cookies是什么

cookies是服务器用来标识web用户的一小块数据。

cookies的基本思想就是让浏览器积累一组服务器特有的信息,并在客户端和服务器端来回传递

Cookies是由服务器端生成,发送给浏览器,浏览器会将Cookies的key/value保存到某个目录下的文本文件内,

下次请求同一网站时就发送该Cookies给服务器(前提是浏览器设置为启用cookies)。

Cookies一般存在用户本地终端上,通常经过加密处理。

Cookies一般通过http请求中的头部一起发送到服务器端。在客户端和服务器端之间来回传递。

一条cookie记录主要由键、值、域、过期时间、大小组成。

2. cookies的分类:持久cookies 和 会话cookies

一般而言,我们所说的cookie是指的持久cookie(设置了过期时间的cookie)

持久cookie:存储在硬盘上;

持久cookie:是在过期时间之后消失。

持久cookie:是存在电脑硬盘里,是可以被同一个浏览器的所有页面共享的(无论是多进程还是多线程浏览器);

补充一点点:

不同浏览器之间不能共享cookie,因为每个浏览器存cookie路径不是一样的。

3. cookies的安全性问题:

第三方web站点使用持久cookie来跟踪用户,当用户访问同一个广告公司提供的站点,浏览器就会回送之前设置的持久cookie,

广告公司便可构建成一个用户档案和浏览习惯的详尽数据集。

(4). storage类型

有如下方法:

clear();

getItem(name);

key(index);

removeItem(name);

setItem(name,value);

localStorage对象:要访问同一个localStorage对象,页面必须同源;

sessionstorage对象:只能被最初给对象存储的页面所访问;

修改localStorage对象、sessionstorage对象都会触发 document 的 storage事件;

localstorage 和 sessionstorage 都是HTML5提供的在客户端存储数据的新方法。

这两个都是windows对象的属性。

其主要区别是:

localStorage - 没有时间限制的数据存储,主要用来存储ajax返回的数据,加快下次访问的渲染速度。

sessionStorage - 针对一个 session 的数据存储。浏览器关闭后就删除。

不同的浏览器无法共享localStorage或sessionStorage中的信息。

注意:cookies、localStorage、sessionStorage的区别

1. 存储时间不同

持久cookies在过期日期之前都会存在;

localStorage会一直存在,除非主动删除;

sessionStorage在标签页关闭之后就会删除;

2. 存储的位置不同

持久cookies是存在用户终端,也就是电脑硬盘上,cookies始终在同源的http请求中携带,会在浏览器和服务器间来回传递。

localStorage和sessionStorage是存在浏览器端;

3. 存储大小不同

cookies数据大小不能超过4k;

sessionStorage和localStorage存储大小比cookies大得多,可以达到5M;

4. cookie还需要指定作用域,不允许跨域调用

localStorage、sessionStorage的使用场景:

localStorage实现离线操作,新闻编辑上传功能,离线时保存在本地,有线时上传;保存用户配置项。

希望用户关闭页面之后就销毁的数据可以保存在sessionStorage中;

(6). application cache 离线存储

1.什么是application cache

application cache是HTML5的新特性,允许浏览器在本地存储页面所需要的资源,使得页面离线也可以访问。

在用户没有与因特网进行连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。

application cache是从浏览器的缓存中分出来的一块缓存区。

如何判断设备是否离线?

if(navigator.onLine) {//设备在线时的操作} else {//设备离线时的操作}

window对象上定义了2个事件:

online: 设备从离线变成在线;

offline: 设备从在线变成离线.

    推荐阅读
  • 公务员申论公文范文(公务员考试-公文写作)

    今天我演讲的题目是《扬起良好行为习惯的风范——成就辉煌人生》。日常行为习惯是引导大家培养好习惯,做现代文明人,为幸福人生奠定基础,为成功的人生铺设台阶。不懂得洁身自好,盲目模仿成年人,抽烟打牌,青春之朝气,青春之纯洁全被糟蹋了。因此,我们从今天做起,学规范、学纪律、勤学习,为自己设计一个文明中学生的形象。

  • 社保协管员的工作职责(社保协管员的工作职责有哪些)

    社保协管员的工作职责负责管理在街道、乡镇居住的退休人员社会保险关系;掌握本社区退休人员养老金发放和领取情况;建立退休人员基本信息库;加强对退休人员信息的动态管理;受理各类人员参保登记、社会保险催缴等相关业务工作;协助开展退休人员死亡后其亲属申领丧葬补助金或抚恤金;对享受社会保险待遇人员的资格核查;协助开展受理社会保险政策和个人社会保险待遇的咨询、查询;为社区居民提供政策咨询服务。

  • 短暂的生活的心情句子(让我越来越成熟的)

    若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。

  • 通天教主对比元始天尊(通天教主门下三霄娘娘是谁)

    通天教主门下三霄娘娘是谁文|欢仔说事在封神中,通天教主有三位弟子法力非常高,可以说是同辈里面名列前茅,她们就是三霄娘娘,为:云霄、琼霄、碧霄;她们的哥哥是我们熟悉的赵公明,也就是后期封神为武财神的赵公明话说她们法力有多高呢,。

  • 他人侮辱你你如何霸气回怼(我妈养我不容易)

    为了给大家一个警惕,不如今天就来说一说,我们该如何分辨“愚孝男”呢?这就是愚孝男的典型思维,面对矛盾的时候,帮亲不帮理。别以为这是好事,对于愚孝男来说,老婆可不属于“亲”的范围,当婆媳发生战争时,他只会帮他妈。所以,愚孝男想让老婆孝顺爸妈,就要先让爸妈对儿媳好,有来有往才正常,而非老婆单方面的付出。以上诸如此类的话,都可以归为愚孝男。

  • 520的贺卡写什么(怎么写520的贺卡内容)

    我们一起去了解并探讨一下这个问题吧!520的贺卡写什么躲过孟婆汤,追你几世纪;错过情人节,表白没机会;恰巧520,你听我两句;追你挺费力,但心很高兴;我是属于你,前世就约定;我俩要一起幸福到永久。520日来到,爱你一句又一句,就把心声来相叙!哈哈,亲爱的朋友,520我爱你,美好祝福送给你!5月20日我爱你,亲爱的,祝你永远幸福快乐!520我爱你,只想给你我的爱恋,携手一生到永远!

  • 适合方脸的短发(看看你喜欢哪种)

    适合方脸的短发侧分刘海bob头,发尾是有点碎发的感觉,发顶蓬松,两侧修饰脸型,给人一种温婉的感觉,适合发量少的仙女。侧分蛋卷头,这种弧度有使头发蓬松起来,这样就会显的脸比较小,这是一款比较时尚的发型。中分的bob头,发尾也是有一点弧度,不过点睛之笔是前面的蟑螂须,把靠近脸两侧的刘海电卷,是发型看起来更精致!剪到下颚骨的短发,然后把头发电卷,感觉电完整个人会更fashion,卷发的弧度也会让方脸的硬气收敛起来。