如何在GET请求中将服务器UTC时间转为用户本地时间？日期匹配问题解决

核心问题在于服务器用UTC日期生成todaysDate，而客户端传递的lastClicked是本地日期，时区差导致特定时段两者日期不匹配，进而误设clicked为false。以下是三种可行的解决方案：

方案一：服务器基于用户时区生成本地日期 #

需要客户端在请求中传递本地时区偏移量，服务器据此计算用户本地的年/月/日，确保两端日期基准一致。

客户端修改（传递时区偏移） #

// 获取本地与UTC的时区偏移（分钟数，东5区返回-300，代表本地时间=UTC+5小时）
const timezoneOffset = new Date().getTimezoneOffset();
// 在PUT请求的body或query中携带该参数
fetch('/your-api-url', {
  method: 'PUT',
  body: JSON.stringify({
    lastClicked: /* 本地日期字符串，格式保持和之前一致 */,
    timezoneOffset
  })
});

服务器端代码修改 #

// 从请求中获取客户端时区偏移
const { timezoneOffset } = req.body;
const now = new Date();
// 计算用户本地时间的时间戳
const localTimestamp = now.getTime() + (timezoneOffset * 60 * 1000);
const localDate = new Date(localTimestamp);

// 生成和客户端格式一致的本地日期字符串（比如"Oct 20 2024"）
const todaysDate = `${localDate.toLocaleDateString('en-US', { month: 'short' })} ${localDate.getDate()} ${localDate.getFullYear()}`;
// 生成本地当天0点的时间戳（若业务需要）
const todaysDateMs = new Date(localDate.getFullYear(), localDate.getMonth(), localDate.getDate()).getTime();

Promise.all([
  Habits.updateMany({}, {
    $set: {
      todaysDate,
      todaysDateMs
    }
  }),
  Habits.updateMany({ lastClicked: { $ne: todaysDate } }, {
    $set: {
      clicked: 'false'
    }
  }),
  // 其他后续操作
]);

方案二：统一使用UTC日期基准 #

不需要修改服务器逻辑，只调整客户端传递的lastClicked为UTC日期字符串，让两端都基于UTC日期对比。

客户端修改 #

// 生成UTC格式的日期字符串（和服务器todaysDate格式一致）
const utcDate = new Date();
const lastClicked = `${utcDate.toLocaleDateString('en-US', { month: 'short', timeZone: 'UTC' })} ${utcDate.getUTCDate()} ${utcDate.getUTCFullYear()}`;

// 发送请求时携带该UTC日期
fetch('/your-api-url', {
  method: 'PUT',
  body: JSON.stringify({ lastClicked })
});

服务器端代码无需改动，保持原有的UTC日期生成逻辑即可。

方案三：使用标准化日期格式存储（推荐） #

将日期统一转为YYYY-MM-DD格式存储，避免月份缩写的歧义，同时简化对比逻辑。

服务器端修改 #

// 生成UTC的YYYY-MM-DD格式（若要用户本地日期，参考方案一计算后转格式）
const todaysDate = new Date().toISOString().split('T')[0];
// 生成当天0点的时间戳
const todaysDateMs = new Date(todaysDate).getTime();

Promise.all([
  Habits.updateMany({}, {
    $set: {
      todaysDate,
      todaysDateMs
    }
  }),
  Habits.updateMany({ lastClicked: { $ne: todaysDate } }, {
    $set: {
      clicked: 'false'
    }
  }),
]);

客户端修改 #

// 生成本地的YYYY-MM-DD格式（若统一UTC则用new Date().toISOString().split('T')[0]）
const today = new Date();
const lastClicked = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

// 发送请求
fetch('/your-api-url', {
  method: 'PUT',
  body: JSON.stringify({ lastClicked })
});

内容的提问来源于stack exchange，提问作者Hannah