美文网首页
客户端时区设置对 moment.js 造成影响的解决方案

客户端时区设置对 moment.js 造成影响的解决方案

作者: 前端艾希 | 来源:发表于2023-06-18 15:00 被阅读0次

一、背景

1.1 问题描述

店长的 windows 电脑,访问门店履约数据看板页面,选择时间周期为4月1日-4月30日,查询的数据,多了5月1日一天的数据。且任意时间范围,都是会多一天的数据,多的一天为结束时间的后一天。经了解,店长的windows电脑,系统默认时区,是美国,而不是北京。

1.2 原因分析

第一步:我们先还原下案发现场:“windows” + “太平洋时区设置”

image.png

第二步:回放店长操作

image.png

第三步:检查分析数据
根据下图分析,相同的时间戳在不同的时区环境下代表的是不同“时间描述”

店长确实提交的是当前时区设置下的 04/01 00:00:00 - 04/30 23:59:59(UTC -7),但是转为 UNIX 时间戳时,对应的是 04/01 07:00:00 - 05/1 06:59:59(UTC)的时间戳,而服务器预期的是 04/01 00:00:00 - 04/30 23:59:59(UTC +8)也就是 03/31 16:00:00 - 05/1 15:59:59(UTC)的时间戳。所以产生了 15小时的偏移量。

image.png
image.png

1.3 结论

客户端时区为非 UTC +8 时,会造成客户端时间和服务器时间产生固定的偏移。

1.4 根因

用户对时区没有概念,会根据电子设备提供的日期、时间校准自身对日期、时间的认知。

二、解决方案

  • 方案 1:使用 moment-timezone 替代 moment,在项目启动时执行 moment.tz.setDefault('Aisa/Shanghai')(ref:https://stackoverflow.com/questions/17697696/set-global-time-zone);

  • 方案 2:获取客户端时区设置,计算与 UTC +8 的 offset,提交数据时自动对数据进行纠正;

  • 方案 3:从源头解决问题,当判断客户端时间非 UTC + 8,提示用户需要修改客户端时区设置;

2.1 方案对比

image.png

2.2 确定方案

最终选择方案 3,实施方案为:

  1. 提供 "isUTC8" 判断是否东八区;

  2. 客户端启动时调用 "isUTC8" ,如果不是东八区,则提示用户修改客户端设置。

相关文章

网友评论

      本文标题:客户端时区设置对 moment.js 造成影响的解决方案

      本文链接:https://www.haomeiwen.com/subject/vhqsydtx.html