前端常见的数据缓存方案及其实现细节_javascript技巧

前端数据缓存机制是提升应用性能、减少网络请求、优化用户体验的关键技术手段。以下是前端常见的数据缓存方案及其实现细节，涵盖浏览器缓存、本地存储、内存缓存等多种策略：

通过 HTTP 协议头控制缓存，适用于静态资源（如 JS、CSS、图片）和接口响应。

Cache-Control: max-age=3600 # 资源有效期 1 小时（优先级高）Expires: Wed, 21 Oct 2024 07:28:00 GMT # 过期时间（HTTP/1.0）

# 服务器返回标识ETag: "33a64df551425fcc55e4d42a148795d9"Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT# 浏览器请求时携带标识If-None-Match: "33a64df551425fcc55e4d42a148795d9"If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT

适用于存储结构化数据，容量约 5~10MB，分为 localStorage 和 sessionStorage。

// 存储数据（注意：只能存字符串）localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));// 读取数据const user = JSON.parse(localStorage.getItem('user'));// 删除数据localStorage.removeItem('user');

适用于存储大量结构化数据（支持索引、事务），容量可达数百 MB。

// 打开数据库const request = indexedDB.open('myDB', 1);request.onupgradeneeded = (event) => { const db = event.target.result; const store = db.createObjectStore('apiCache', { keyPath: 'url' }); store.createIndex('timestamp', 'timestamp', { unique: false });};// 存储数据function saveToIndexedDB(url, data) { const transaction = db.transaction('apiCache', 'readwrite'); const store = transaction.objectStore('apiCache'); store.put({ url, data, timestamp: Date.now() });}// 查询数据async function getFromIndexedDB(url) { return new Promise((resolve) => { const transaction = db.transaction('apiCache', 'readonly'); const store = transaction.objectStore('apiCache'); const request = store.get(url); request.onsuccess = (e) => resolve(e.target.result?.data); });}

适用于单页应用（SPA）中短期数据缓存，随页面刷新失效。

实现离线缓存和网络请求拦截，适合 PWA 应用。

import { useQuery } from 'react-query';function UserProfile() { const { data } = useQuery('userData', () => fetch('/api/user').then(res => res.json()), { staleTime: 5 * 60 * 1000, // 5分钟缓存有效期 cacheTime: 30 * 60 * 1000 // 30分钟保留时间 }); // ...}

import useSWR from 'swr';function Profile() { const { data } = useSWR('/api/user', fetcher, { revalidateOnFocus: false, // 窗口聚焦时不刷新 dedupingInterval: 60000 // 60秒内相同请求去重 }); // ...}

通过合理设计缓存机制，可显著提升前端性能，但在实际应用中需平衡以下关系：✅ 新鲜度 vs 性能✅ 存储空间 vs 用户体验✅ 开发成本 vs 维护成本

到此这篇关于前端常见的数据缓存方案及其实现细节的文章就介绍到这了,更多相关前端数据缓存机制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：前端vue中使用signalr的方法举例详解vuejs

下一篇：使用Vue3开发鸿蒙的HelloWorld附详细实现代