美文网首页
客户端时区设置对 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