在我的網站中使用 localStorage 進行翻譯，而不是每次我再次訪問該頁面時加載它們

Question

我有一個功能可以從 ajax 請求將翻譯加載到我的網站，但我想讓我的代碼保存這些翻譯，然后從 localStorage 加載它，而不是再次執行請求。

我怎樣才能讓它們保存到 localStorage 中？

Answer 1

您有多種選擇。

首先，您需要認識到這里的一些陷阱。 如果您告訴您的網站將翻譯存儲在本地存儲中，那么如果將來需要更改翻譯，則可能有也可能沒有更新翻譯的方法。 此外，如果您更新網站並添加翻譯會怎樣？ 您可能會發現自己需要對 localstorage 中的數據進行散列，只是為了詢問服務器翻譯是否已更改。

可能最強大的選擇是將翻譯作為靜態數據直接注入網頁。 這樣就不需要ajax請求。 這可能需要服務器端渲染，所以如果這不是一個選項，這是可以理解的。

如果您堅持使用本地存儲，請考慮以下使用相同翻譯鍵管理多個頁面的技術：

1. 為所有翻譯鍵使用命名空間，例如 page1:mName 和 page2:mName。
2. 使用每頁本地存儲。 不是總是將每個頁面的翻譯保存到相同的本地存儲密鑰中，而是將每個頁面放入它自己的本地存儲密鑰中

將字符串保存到 localstorage 的代碼是：

localStorage.setItem(key, value)

並從本地存儲讀取密鑰：

localStorage.getItem(key)