js 缓存对象

在JavaScript中，缓存对象通常指的是用于存储数据以便后续快速访问的一种机制。缓存可以显著提高应用程序的性能，因为它减少了不必要的数据检索和计算。

基础概念：

1. 内存缓存：数据存储在浏览器的内存中，访问速度非常快，但当浏览器窗口关闭时，数据会丢失。
2. 本地存储（LocalStorage）：HTML5引入的一种持久化存储机制，数据存储在用户的浏览器中，直到被明确删除。
3. 会话存储（SessionStorage）：与LocalStorage类似，但数据仅在当前浏览器会话期间有效。
4. IndexedDB：一种在浏览器中存储大量结构化数据的方式，支持事务处理和高性能查询。

优势：

• 减少网络请求，加快页面加载速度。
• 减轻服务器负载。
• 提高用户体验，因为用户可以更快地访问之前加载过的内容。

应用场景：

• 图片懒加载：先加载可视区域内的图片，其他图片缓存起来，滚动时再加载。
• API响应缓存：将频繁请求的API响应结果缓存起来，减少重复请求。
• 分页数据缓存：在用户浏览分页数据时，缓存已加载的数据，以便快速切换页面。

可能遇到的问题及解决方法：

1. 缓存过期：缓存的数据可能随着时间的推移而过时。解决方法可以是设置缓存过期时间，或者在数据更新时主动清除缓存。
2. 缓存雪崩：大量缓存数据在同一时间过期，导致服务器压力骤增。可以通过设置不同的过期时间来分散缓存失效的时间点。
3. 缓存穿透：查询一个不存在的数据，导致每次请求都直接打到数据库上。可以通过布隆过滤器或者缓存空值来解决这个问题。
4. 缓存击穿：一个热点数据过期，导致大量请求直接打到数据库上。可以通过加锁或者使用互斥机制来保证只有一个请求去加载数据，其他请求等待。

示例代码（使用LocalStorage进行简单缓存）：

function getCachedData(key) {
  const data = localStorage.getItem(key);
  if (data) {
    const { value, timestamp } = JSON.parse(data);
    if (Date.now() - timestamp < 3600000) { // 缓存1小时
      return value;
    } else {
      localStorage.removeItem(key); // 缓存过期，移除数据
    }
  }
  return null;
}

function setCachedData(key, value) {
  localStorage.setItem(key, JSON.stringify({ value, timestamp: Date.now() }));
}

在这个示例中，getCachedData函数尝试从LocalStorage中获取缓存的数据，并检查数据是否过期。如果数据过期，则移除缓存。setCachedData函数用于将数据存入LocalStorage，并记录当前的时间戳。