在页面之间共享变量

share variable among pages

本文关键字：共享变量 之间      更新时间：2024-04-17

我有一个简单的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变量中。

当我想在所有页面之间共享一个变量时（比如在这种情况下），我需要做什么？

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

localStorage.setItem('language', 'eng');
// Retrieve the object from storage
var retrievedLanguage = localStorage.getItem('language');
console.log(retrievedLanguage); /// prints eng

如果目标浏览器符合html5，请尝试本地存储：

//set data
localStorage.setItem("language", language);
// get data
var language = localStorage.getItem("language");

将可用于所有页面。

有几种方法可以做到这一点。但我只列出三个。如果您想要JavaScript方法（依赖于浏览器启用/支持的JavaScript）：

var language = localStorage.getItem("language") || "";
if(language !== "")
{
    // Set the language for content in here
}
else
{
    // Store the language in LocalStorage here.
    localStorage.setItem("language", "en-us");
}

或者，你可以将这样的东西存储在你的数据库（服务器端）中，但我建议不要将这样的事情存储在你自己的数据库中，除非你绝对需要确保价值在你需要的时候存在

另一种选择是，当他们单击超链接或按钮时，将类似language=en-us的内容附加到查询字符串中。然后，您可以在下一页使用JavaScript或服务器端语言从查询字符串中获取这些数据。

在所有页面中保留语言变量有不同的方法。

1） 使用URL本身中的语言字符串，例如：https://www.paypal.com/ar/webapps/mpp/home

2） 呼叫服务器以了解语言。

3） 按照uzaif 的规定存储在cookie中

4） 使用本地存储

相关文章：