如何確保時間格式在前端與後端中的一致性?

閱讀時間約 1 分鐘



在現代跨時區和跨平台的網頁應用程式中,確保日期和時間的統一格式至關重要。本文將介紹如何使用 ISO 8601 標準來設計和實現全球統一的時間格式,在前端與後端應用程式中確保一致性和可靠性。

隨著全球化的發展,跨時區和跨平台的應用程式越來越普遍。日期和時間的格式化和處理成為了開發中不可忽視的重要問題。ISO 8601 是一個被廣泛接受的國際標準,它提供了一種統一的日期和時間表示方法,能夠有效解決時區和格式帶來的混淆。


了解問題核心

如何確保前端和後端在處理日期時間時具有一致的標準,從而減少因為不同時區或格式而引起的混淆和錯誤?

這個問題的核心在於:

  • 前端: 根據使用者所在時區,將本地時間轉換成適合傳送的格式。
  • 後端: 統一接收特定格式的時間,進行驗證,並將其轉換成資料庫可存儲的格式。
  • 資料庫: 存儲統一格式的時間,以便後續查詢和計算。


設計方案

1. 前端

  • 使用者輸入: 提供友善的日期時間選擇器或輸入框,讓使用者直觀地輸入時間。
  • 時區判斷與時間轉換: 將使用者輸入的本地時間,轉換成 UTC 時間 (協調世界時),並以 ISO 8601 格式 (例如:2024-09-18T01:19:43Z) 傳送給後端。ISO 8601 格式是國際標準,明確表示 UTC 時間。(補充:最後面如果是 Z 就代表 UTC +0,如果要其他時區則是:2024-09-18T09:19:43+08:00)


在前端,我們通常使用 JavaScript 來處理日期和時間。為了確保日期時間格式的一致性,我們應該將日期時間格式化為 ISO 8601 字串。JavaScript 提供了內建的方法來實現這一點:

// 取得時間字串
const nowLocal = new Date();
console.log(nowLocal); // Wed Sep 18 2024 09:19:43 GMT+0800 (台北標準時間)

const nowUTC = nowLocal.toISOString();
console.log(nowUTC); // 2024-09-18T01:19:43.124Z

// 恢復時間字串
const pastLocal = new Date('2024-09-18T01:19:43.124Z')
console.log(pastLocal); // Wed Sep 18 2024 09:19:43 GMT+0800 (台北標準時間)

const pastUTC = pastLocal.toISOString();
console.log(pastUTC); // 2024-09-18T01:19:43.124Z


前端送出 API 範例:

當要送出『使用者電腦時區的 0 點 0 分』時,則可以直接使用 toISOString 轉換:

const sendData = () => {
const currentDate = new Date(); // Wed Sep 18 2024 00:00:00 GMT+0800 (台北標準時間)
const isoDateTimeString = currentDate.toISOString(); // 2024-09-17T16:00:00.000Z
const requestData = { startAt: isoDateTimeString };

fetch('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
}


若是要送出『目標(設備)時區的 0 點 0 分』時,則需要指定時區:

const sendData = () => {
const targetTimeZoneDateTime = dayjs.tz('2024-09-18', 'Asia/Taipei').format(); // 2024-09-18T00:00:00+08:00
const currentDate = new Date(targetTimeZoneDateTime); // Wed Sep 18 2024 00:00:00 GMT+0800 (台北標準時間)
const isoDateTimeString = currentDate.toISOString(); // 2024-09-17T16:00:00.000Z
const requestData = { startAt: isoDateTimeString };

fetch('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
}



2. 後端

  • Joi 驗證:
    • 使用 Joi 套件定義嚴格的日期時間驗證規則,確保接收到的時間格式符合 ISO 8601 標準。
Joi.object({
startAt: Joi.date().iso().raw(),
});


3. 資料庫

  • 資料庫存儲:
    • 將解析後的 Date 對象存儲到資料庫中。
    • 建議: 資料庫中存儲的時間字段使用 UTC 時間,避免時區混淆。
    • 注意: 不同資料庫對於日期時間的存儲方式和精度可能不同,需要根據所使用的資料庫進行調整。
  • 時間類型: 選擇適合的資料類型存儲時間,例如:
    • MySQL: DATETIME 或 TIMESTAMP
    • PostgreSQL: TIMESTAMP WITH TIME ZONE
  • 時區設定: 確保資料庫的時區設定為 UTC。


參考資料

  1. 淺談 JavaScript 中的時間與時區處理


1會員
7內容數
請尋找快樂的動力,換個觀點,保持對世界的好奇與熱情。
留言0
查看全部
發表第一個留言支持創作者!
TJ的沙龍 的其他內容
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
最近觀察到許多網站有一個特性,就是有些網站會使用不同的模板做同一個關鍵字。 很多開發者在做產品的時候會有一個特性,就是會使用相同的模板。使用相同模板的好處不外乎是減少重複開發的時間、快速上站。 因為其實在程式開發中有很多功能可能是相似甚至是重複的。在這種情況下我們不應該重複去開發相同功能,而
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
Thumbnail
本篇文章講解了字符編碼的基礎知識,包括ASCII, Unicode 和 UTF-8的誕生背景、解決的問題以及轉換方式。瞭解這些知識有助於解決在讀檔案時用錯誤的編碼方式轉換就會出現亂碼等問題。文章內容涉及電腦技術中的字符編碼相關歷史緣由,可幫助讀者解決相關疑問。
Thumbnail
建構Anytype之前..... 1.清晰劃分工作區 2.選擇模板套用 3.改變外觀界面
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
最近觀察到許多網站有一個特性,就是有些網站會使用不同的模板做同一個關鍵字。 很多開發者在做產品的時候會有一個特性,就是會使用相同的模板。使用相同模板的好處不外乎是減少重複開發的時間、快速上站。 因為其實在程式開發中有很多功能可能是相似甚至是重複的。在這種情況下我們不應該重複去開發相同功能,而
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
Thumbnail
本篇文章講解了字符編碼的基礎知識,包括ASCII, Unicode 和 UTF-8的誕生背景、解決的問題以及轉換方式。瞭解這些知識有助於解決在讀檔案時用錯誤的編碼方式轉換就會出現亂碼等問題。文章內容涉及電腦技術中的字符編碼相關歷史緣由,可幫助讀者解決相關疑問。
Thumbnail
建構Anytype之前..... 1.清晰劃分工作區 2.選擇模板套用 3.改變外觀界面
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。