i18next-localstorage-backend 是一款 i18next 库的后端存储插件，它允许将多语言文件（诸如 JSON、yaml 或 XML）存储在本地存储（local storage）中。在前端开发中，多语言国际化是非常重要的一部分，它允许我们为全球用户提供本地化的使用体验。而本地存储方案的好处在于，它非常方便，并且无需服务器协作。

2. 安装

i18next-localstorage-backend 依赖于 i18next 和 localforage，所以在使用之前需要先安装这两个扩展库：

npm install i18next localforage i18next-localstorage-backend --save

3. 配置

配置 i18next-localstorage-backend 有几个参数：

• projectId 用于标识应用程序
• version 用于指定多语言文件的版本号
• storageKey 指定多语言文件在本地存储中的键
• suffix 多语言文件的后缀名
• languages 允许的语言列表

比如下面的例子：

-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- -------------------------------

-------
    -------------
    -------
        --- -----------------
        ---------- ---------------
        ------------ -----
        ---- -----
        -------- -
            ---------- ---------
            -------- --------
            ----------- ----------------------
            ------- --------
            ---------- ------ -----
        -
    ---

4. 使用

在使用 i18next-localstorage-backend 时，一般需要加载多语言文件，这可以通过调用 i18next.init 完成。一旦文件加载完毕，就可以通过 i18next.t 函数获取字符串对应的翻译。

以下是一个简单的示例：

-- -------------------- ---- -------
--------------
    ---- -----
    ---------- -
        --- -
            ------------ -
                ------ -- -- - ----- -- ---------
            -
        -
    -
-- -------- ----- -- -
    -- ----------- --- ----- -- ---
    ----------------------
---

如果你想从本地存储中读取多语言文件，需要将 resources 设置为 null：

-- -------------------- ---- -------
--------------
    --- -----------------
    ---------- ---------------
    ------------ -----
    ---- -----
    ---------- -----
    -------- -
        ---------- ---------
        -------- --------
        ----------- ----------------------
        ------- --------
        ---------- ------ -----
    -
-- -------- ----- -- -
    -- ----------- --- ----- -- ---
    ----------------------
---

5. 实战

假设我们有一个网站，要求提供英语、法语和西班牙语的本地化支持。我们可以创建三个 JSON 文件，分别对应不同的语言翻译：

{
    "key": "I am a value in English."
}

{
    "key": "Je suis une valeur en français."
}

{
    "key": "Soy un valor en español."
}

在代码中，我们可以使用 i18next-localstorage-backend 来读取这些文件并提供多语言支持：

-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- -------------------------------

-------
    -------------
    -------
        --- -----------------
        ---------- ---------------
        ------------ -----
        ---- -----
        ------ -----
        -------- -
            ---------- ---------
            -------- --------
            ----------- ----------------------
            ------- --------
            ---------- ------ ----- -----
        -
    ---

------------------------------
-- -- -- -- - ----- -- ---------
---------------------------- - ---- ---- ----
-- -- --- ---- --- ------ -- ----------
---------------------------- - ---- ---- ----
-- -- ---- -- ----- -- ---------

6. 总结

i18next-localstorage-backend 是一款非常方便的 i18next 库的后端存储插件。它让我们可以轻松地将多语言文件存储在本地存储中，并实现多语言国际化。通过本文的介绍和示例，相信读者已经掌握了如何使用这个插件，如果你准备开发一款面向全球用户的 Web 应用，它一定是非常有用的一款工具。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/i18next-localstorage-backend