如何使用 RESTful API 创建客户端缓存？-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 应用程序的复杂性不断增加，客户端缓存已经成为提高性能和用户体验的重要手段之一。RESTful API 作为一种常用的 Web API 设计风格，也可以用来创建客户端缓存。本文将介绍如何使用 RESTful API 创建客户端缓存，并提供示例代码和指导意义。

什么是客户端缓存？

客户端缓存是指将 Web 应用程序中的一些数据存储在客户端（通常是浏览器）中，以便在后续的页面访问中快速获取这些数据，而不必重新从服务器获取。客户端缓存可以减少网络传输量和服务器负载，提高应用程序的性能和响应速度，同时也可以改善用户体验。

客户端缓存通常分为两种类型：强缓存和协商缓存。强缓存是指在缓存期限内，客户端直接从缓存中获取数据，而不必向服务器发起请求。协商缓存是指客户端向服务器发起请求，但服务器会根据请求中的条件判断是否需要返回数据，如果数据没有发生变化，则返回 304 状态码，告诉客户端使用缓存中的数据。

RESTful API 可以用来创建客户端缓存的原因是，它通常使用 HTTP 协议进行通信，而 HTTP 协议中已经定义了一些缓存相关的头部字段，例如 Cache-Control、Expires、Last-Modified 和 ETag 等。通过合理地配置这些头部字段，可以实现强缓存和协商缓存。

强缓存

强缓存是指客户端直接从缓存中获取数据，而不必向服务器发起请求。要实现强缓存，可以使用 Cache-Control 和 Expires 头部字段。

Cache-Control 是 HTTP/1.1 中定义的缓存控制头部字段，可以用来指定缓存策略。常用的值有：

public：表示响应可以被任何中间缓存（如代理服务器）缓存。
private：表示响应只能被客户端缓存，中间缓存不能缓存。
no-cache：表示客户端和中间缓存都不能缓存响应，但可以缓存响应的元数据（例如 ETag）。
no-store：表示客户端和中间缓存都不能缓存响应和元数据。

Expires 是 HTTP/1.0 中定义的缓存控制头部字段，可以用来指定缓存过期时间。它的值是一个 GMT 格式的日期字符串，例如：

Expires: Wed, 21 Oct 2026 07:28:00 GMT

如果缓存过期时间已经过期，客户端就会向服务器发送请求，否则就直接从缓存中获取数据。

下面是一个示例代码，使用 Express 框架创建了一个 RESTful API，返回一组静态数据，并配置了 Cache-Control 和 Expires 头部字段，实现了强缓存：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

app.get('/api/users', (req, res) => {
  // 设置 Cache-Control 头部字段，缓存 1 分钟
  res.setHeader('Cache-Control', 'public, max-age=60');

  // 设置 Expires 头部字段，缓存 1 分钟
  const expires = new Date(Date.now() + 60 * 1000);
  res.setHeader('Expires', expires.toUTCString());

  res.json(data);
});

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000');
});

协商缓存

协商缓存是指客户端向服务器发起请求，但服务器会根据请求中的条件判断是否需要返回数据，如果数据没有发生变化，则返回 304 状态码，告诉客户端使用缓存中的数据。要实现协商缓存，可以使用 Last-Modified 和 ETag 头部字段。

Last-Modified 是 HTTP/1.1 中定义的缓存控制头部字段，可以用来指定响应的最后修改时间。如果客户端再次请求数据时，会在请求头中添加 If-Modified-Since 字段，该字段的值是上一次响应的 Last-Modified 值。服务器收到请求后，可以比较 If-Modified-Since 和实际的最后修改时间，如果相同，则返回 304 状态码，否则返回新的数据。

ETag 是 HTTP/1.1 中定义的缓存控制头部字段，可以用来指定响应的实体标签。如果客户端再次请求数据时，会在请求头中添加 If-None-Match 字段，该字段的值是上一次响应的 ETag 值。服务器收到请求后，可以比较 If-None-Match 和实际的实体标签，如果相同，则返回 304 状态码，否则返回新的数据。

下面是一个示例代码，使用 Express 框架创建了一个 RESTful API，返回一组动态数据，并配置了 Last-Modified 和 ETag 头部字段，实现了协商缓存：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

let data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

app.get('/api/users', (req, res) => {
  // 获取数据的最后修改时间和实体标签
  const lastModified = new Date(data.reduce((acc, cur) => Math.max(acc, cur.updatedAt || 0), 0));
  const etag = require('crypto').createHash('md5').update(JSON.stringify(data)).digest('hex');

  // 比较 If-Modified-Since 和 Last-Modified，如果相同则返回 304
  if (req.headers['if-modified-since'] && new Date(req.headers['if-modified-since']) >= lastModified) {
    res.status(304).end();
    return;
  }

  // 比较 If-None-Match 和 ETag，如果相同则返回 304
  if (req.headers['if-none-match'] === etag) {
    res.status(304).end();
    return;
  }

  // 设置 Last-Modified 和 ETag 头部字段
  res.setHeader('Last-Modified', lastModified.toUTCString());
  res.setHeader('ETag', etag);

  // 返回数据
  res.json(data);
});

app.put('/api/users/:id', (req, res) => {
  // 更新数据
  const id = parseInt(req.params.id);
  const index = data.findIndex(user => user.id === id);
  if (index >= 0) {
    data[index] = { ...data[index], ...req.body, updatedAt: Date.now() };
    res.json(data[index]);
  } else {
    res.status(404).end();
  }
});

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000');
});

指导意义

使用 RESTful API 创建客户端缓存可以提高 Web 应用程序的性能和响应速度，但也需要注意一些问题：

缓存策略应该根据具体的业务需求进行配置，不能一刀切。
强缓存和协商缓存应该结合使用，以充分利用客户端缓存。
缓存的数据应该尽可能减少，以避免占用过多的客户端存储空间。
缓存的数据应该及时更新，以保证数据的准确性和实时性。
缓存的数据应该考虑安全性，避免敏感数据泄露。

最后，需要注意的是，客户端缓存只是提高 Web 应用程序性能的一种手段，还有很多其他的优化技术，例如代码优化、网络优化、资源优化等。只有综合运用这些技术，才能真正提高 Web 应用程序的性能和用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d13140a941bf7134286989

如何使用 RESTful API 创建客户端缓存？

什么是客户端缓存？

强缓存

协商缓存

指导意义

接着读