聊聊浏览器的缓存，cookie和storage和indexDB

介绍前端浏览器存储的五种方式

`localStorage` 属性允许你访问一个`Document `的 `Storage`；存储的数据将保存在浏览器会话中。 `localStorage` 类似`sessionStorage`，但其区别在于：存储在 `localStorage` 的数据可以**长期保留**；而当页面会话结束，当页面被关闭时，存储在 `sessionStorage` 的数据会被清除 。

在前端开发中，Storage是浏览器提供的用于在客户端存储数据的机制，包括 LocalStorage和 SessionStorage。它们通过 Window对象的属性暴露，支持以**键值对**形式存储数据，适用于不需要频繁与服务器交互的轻量级数据存储。位置在 F12开发者工具 ——》 Application ——》 StorageLocalStorage 和 SessionStorage 是前端轻量级存储的核心工具，适用于非敏感数据的持久化或临时存储。

和，它们都是Storage的实例对象。// true。

DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。定义： 一个行内元素只占据它对应标签的边框所包含的空间。

HTTP缓存是针对网络请求的响应内容进行缓存，Web Storage和IndexedDB是用于存储网页中的数据，而Cookies主要用于在客户端和服务器之间传递状态信息。它们是HTML5提供的一种在客户端存储数据的机制，可以在浏览器关闭后依然保留数据。其中LocalStorage的数据在浏览器关闭后仍然存在，而SessionStorage的数据在会话结束后被清除。这是一个在浏览器中存储结构化数据的数据库，可以存储大量数据，并支持高效的检索。它提供了比Web Storage更强大的存储能力和查询能力。

Cookie是在Web开发中用于存储和传递信息的一种机制。它是由服务器发送给浏览器的小型文本文件，保存在用户的计算机上。具体来说，当用户在浏览器中访问一个网站时，网站会生成一个包含各种信息的Cookie，并将其发送到用户的计算机上。下次用户再次访问该网站时，浏览器会将之前存储的Cookie附加在请求中一同发送给服务器。Cookie的主要作用是为了标识和跟踪用户。它可以记录用户的活动、存储用户的偏好设置、维持用户的登录状态等。通过Cookie，网站可以根据用户的特定需求和喜好来提供个性化的体验。

如果服务器返回 304 Not Modified 响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。如果强制缓存未命中，但协商缓存可用，则会向服务器发送条件请求，询问资源是否更新。Service Worker 是一种特殊的 JS 脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。由于其可以完全控制网络请求，因此具有最高的优先级，即使是强制缓存也可以被它所覆盖。如果存在强制缓存，并且缓存没有过期，则直接使用缓存，不需要向服务器发送请求。

=

一、为什么使用缓存简单的说，就是为了让页面加载的更快一点，通过将部分静态资源保存到本地这种方式，从而减少网络请求，提升用户体验的一种手段。二、使用缓存有什么弊端凡事有利必有弊，缓存也是。使用缓存最大的问题就是如果资源有更新，如果不采取相应措施的话，我们在访问的时候就很可能获取不到最新的资源。三、怎么主动清除缓存(敲黑板)1.针对谷歌浏览器用户首先按F12或者鼠标右键，选择检查，就打开我们...

之前对缓存都是一知半解的，都是基于理论之上没有正整实际动手验证过，今天抽时间终于把缓存重新理了一片 1、 设置js 、css缓存       http头部中设置expires,Cache-Control(具体怎么设置这里就不细说)，IIS服务器上设置过期设置 2、浏览器中如何设置缓存document.cookie,  通过key/value的形式，对缓存的操作可参照   点击打开链接

Cookie Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密） Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求...

1、http缓存是基于HTTP协议的浏览器文件级缓存机制。 2、websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现 3、indexDB是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API 4、Cookie一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密） 5、Localstoragehtml5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度 .

从存储位置看，浏览器缓存的分类

浏览器缓存时浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度. 前端缓存可分为两大类:http缓存和浏览器缓存 一.http缓存 http缓存指的是:当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要求资源"的副本,就可以直接从浏览器缓存中提取,而不是从原始服务器中提取这个资源 常见的htttp缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力, http缓存都是从第二次请求开始的,第一次请求资源时,服务器返回资源,并在respone hearder头中回传资源的