启发式缓存和本地存储缓存

启发式缓存详解

当服务器响应中没有包含 Expires、Cache-Control: max-age 或 Cache-Control:s-maxage 时,浏览器会采用一个启发式的算法来确定缓存的时间。

1. 启发式缓存的计算方法

通常,启发式缓存会根据响应头中的 Date 和 Last-Modified 之间的时间差来计算缓存时间。

计算公式: 缓存时间 = (Date - Last-Modified) * 0.1

例如,如果 Date 是当前时间,Last-Modified 是 10 天前,那么启发式缓存的有效期就是 1 天。

2. 启发式缓存的应用

启发式缓存主要用于那些没有明确指定缓存策略的资源。它是浏览器的一种兜底策略,为没有设置缓存策略的资源提供一定的缓存能力。

3. 启发式缓存的优缺点

优点:

  • 为没有明确缓存策略的资源提供缓存能力
  • 减少了对服务器的请求次数

缺点:

  • 缓存时间不精确,可能导致资源更新不及时
  • 不同浏览器的实现可能不同,缓存行为不可控

本地存储缓存详解

本地存储缓存是指在客户端(如浏览器、移动应用等)本地保存数据的一种机制。它可以提高应用程序的性能和用户体验,减少对服务器的请求,并支持离线访问等功能。本地存储缓存主要包括以下几种技术:

1. Web Storage

是 HTML5 提供的本地存储方案,包括 localStorage 和 sessionStorage 两种机制:

1.1 localStorage

localStorage 是一种持久化的本地存储,数据永远不会过期,除非被明确删除。

特点:

  • 容量较大,通常为 5MB
  • 数据在相同域名下的所有页面间共享
  • 只能存储字符串,需要手动序列化和反序列化

使用示例:

javascript 复制代码
// 存储数据
localStorage.setItem('username', 'John');

// 获取数据
const username = localStorage.getItem('username');

// 删除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();

1.2 sessionStorage

sessionStorage 类似于 localStorage,但数据只在当前会话(窗口或标签页)中有效,关闭窗口后数据会被清除。

特点:

  • 容量通常为 5MB
  • 数据只在同一个窗口(或标签页)的同源页面间共享
  • 只能存储字符串

使用方法与 localStorage 相同。 Web Storage 的优点:

  • 简单易用
  • 存储容量较大(通常为5MB左右)
  • 可以存储字符串类型的数据

缺点:

  • 只能存储字符串,复杂数据结构需要手动序列化和反序列化
  • 同步操作,可能会阻塞主线程
  • 不支持索引和复杂查询

2. IndexedDB

IndexedDB 是一个低级 API,用于客户端存储大量结构化数据。它可以存储更复杂的数据结构,如 JavaScript 对象。

特点:

  • 可以存储大量数据
  • 支持索引,可以高效检索
  • 支持事务,保证数据一致性
  • 异步 API,不会阻塞主线程

3. Cache API

Cache API 是一种用于存储网络请求和响应的 API,主要用于实现离线 Web 应用和提高性能。它通常与 Service Workers 结合使用。

主要特点:

  • 可以缓存网络请求和响应
  • 支持离线访问
  • 可以精细控制缓存策略
相关推荐
小阮的学习笔记12 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜13 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=13 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck17 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!38 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。43 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架