javascript - 页面之间共享变量

Question

我有一个简单的 JavaScript 文件，它负责页面上的翻译。因此，如果用户想查看例如中的页面英语，他点击它，页面就会自动翻译。一切都很好，除非用户转到另一个页面。

现在我的 JavaScript 再次重新加载，默认语言开始使用。这是不可取的 - 我希望我的 JavaScript 记住用户指定的语言。

这是我的 JavaScript 代码，用于展示我在做什么

//translations
var language = "en";
$(function () {
    translatePage();

    $("#PageLanguages li").on("click", function (attr) {
        var selLang = $(this).data("language");
        if (selLang) {
            language = selLang;
        }

        translatePage();
    });

    function translatePage() {
        $.ajax({
            url: 'languages.xml',
            success: function (xml) {
                $(xml).find('translation').each(function () {
                    var id = $(this).attr('id');
                    var text = $(this).find(language).text();
                    $("#" + id).text(text);
                });
            },
            error: function (err) {
                var x = err;
            }
        });
    };
});

如您所见，我将语言(用户指定的语言)存储在顶部的 language 变量中。

当我希望网站在所有页面之间共享变量时(例如本例)，我需要做什么？

Answer 1

我的建议是基于浏览器的，在现代浏览器中使用本地存储

localStorage.setItem('language', 'eng');

// Retrieve the object from storage
var retrievedLanguage = localStorage.getItem('language');

console.log(retrievedLanguage); /// prints eng