前端数据缓存

我们将讨论如何有效地缓存发送到后端的请求，而无需修改后端 HTTP 标头。

协调状态变更之间的数据可能很困难。例如，假设有一个应用程序，你向后端发送请求以获取要显示的帖子列表，当用户点击某个帖子时，应用程序会发送另一个请求来获取该帖子的数据。后端相对简单，可以获取该帖子的精确数据，但你还想显示下一篇帖子和上一篇帖子的标题，以及用户会话期间可能共享的一些赞助商数据。在这种情况下，再次从后端请求数据会造成资源浪费，因此前端此时有一些选择。

管理 Javascript 状态

前端可以跟踪待重用的数据。可以将数据存储在全局变量中，将状态传递给更高层级，或者使用类似React Context 的API 。每种方法都存在问题，全局变量默认情况下是不好的。随着请求数量的增长，在组件之间传递数据或在类似 API 的上下文中维护数据可能会变得混乱。

使用状态管理框架

这是像Redux这样的 JavaScript 状态管理框架的典型用例。它们提供了一种管理复杂应用程序数据的方法。但如果你和我一样，引入一个新框架以及学习围绕它编写代码的额外工作量可能会让你望而却步。这些框架也可能强制前端采用特定的设计风格，因此对于不熟悉框架的人来说，这可能是一项巨大的投入。

浏览器存储（真正的MVP）

我们最终找到了答案：浏览器存储 API。它是一个由浏览器管理的键值存储。浏览器存储有两种类型：本地存储和会话存储。它们提供的 API 类似，但本地存储永远不会被清除，而会话存储会在标签页关闭后被清除。这种方法比我们之前的方法要好得多，因为它既不像传递状态那样简陋，也不像学习新的状态管理框架那样复杂。

浏览器存储 API 只包含两个操作，顾名思义，分别是setItem存储给定键的值和检索该值。我们无需自行管理状态，只需提供键和值即可存储和检索数据。getItemsetItemgetItem

本 API 的一个使用示例是创建一个函数，该函数向 URL 发送 GET 请求并将结果作为 Promise 返回。

// Without caching
function FetchData(url) {
  return fetch(url).then(res => res.text())
}

// With Caching
function FetchData(url) {
  let storageData = sessionStorage.getItem(url);
  if (storageData === null) {
    return fetch(url).then(res => res.text()).then(textData => {
      sessionStorage.setItem(url, textData)
      return textData
    })
  }
  return Promise.resolve(storageData);
}

我们将提供的 URL 作为键，并将获取的数据存储起来，以便后续请求都能直接从缓存中获取数据。这种方法的优点在于它更容易理解，而且不会干扰我们的前端代码。在这种情况下，它也是解决我们问题的最佳方案。

缓存是优化性能和用户体验最有效的技术之一。将请求数据存储在前端，可以加快导航速度，并通过避免不必要的后端请求，更好地控制存储的内容。

如果你喜欢我的文章，欢迎访问我的博客