用于网站本地化的 Web 存储

Question

我正在尝试创建一个在首次访问时显示所选语言页面的网站。单击语言名称后，语言名称字符串（例如法语）将存储在网络/本地存储中。并且当用户下次访问该网站时，会检查语言字符串并显示特定语言页面。 我已经编写了十二个函数，用于在单击每种语言的锚标记时存储语言字符串。像这样：

function english()
{
if(typeof(Storage)!=="undefined")
  {
  localStorage.clear();
  localStorage.language="English";
 window.location.reload();
  }
}

function french()
{
if(typeof(Storage)!=="undefined")
  {
  localStorage.clear();
  localStorage.language="French";
  window.location.href = "french.html";
  }
}

这种方法真的有效吗？我认为为多种语言创建多个页面有利于 SEO，而不是即时更改文本字符串。 直到这里，当我检查 Chrome 开发人员控制台时，字符串的值被存储。但是当我关闭选项卡或浏览器窗口时，存储的值就消失了，下次它不记得语言了。

我正在使用此代码检查语言（我必须检查 12 种语言）：

window.onload = function() {
if (localStorage.language="Language")
  {
   window.location.href = "language.html";
  }
else if (localStorage.language="English")
  {
   window.location.href = "eng.html";
  }
else if (localStorage.language="French")
  {
  window.location.href = "french.html";
  }
else if (localStorage.language="Spanish")
  {
  window.location.href = "spanish.html";
  }

在检查第一个“if”条件后，代码有点停止，无论是真还是假，它只是停在那里并且不检查除此之外的“else if”条件。

有人可以帮我吗？即使在浏览器关闭后，示例代码似乎也将值存储在网络存储中，但我无法在我的中复制它。

Answer 1

正如 wonko79 已经指出的那样，问题是在您的 if 内部检查您实际上是 重新分配 变量而不是检查其内容。要实际检查字符串内容是否相等，您需要使用两个等号==（如果您也想检查类型是否相等，则需要三个）。

此外，无论何时你不断重复自己，这都是一个好兆头，表明你可以改进你的代码。在这种情况下，您始终检查 localStorage.language 是否等于某种语言，如果是这种情况，则将位置更改为该语言的 URL。所以本质上，您正在查找存储在本地存储中的语言的 URL。

JavaScript 有一个高效的查找数据结构：对象。因此，为了改善您的情况，我们可以先将数据存储在一个对象中：

var languageUrls = {
    'language': 'language.html',
    'english': 'eng.html',
    'french': 'french.html',
    'spanish': 'spanish.html'
};

完成之后，我们可以简单地查找立即基于localStorage.language的值：

window.onload = function () {
    // we can perform the lookup by providing the *key* in brackets:
    var url = languageUrls[localStorage.language];

    // in case the key did not exist in our object, url will be null
    if (!url) {
        // so we might want to provide a fallback value here
        url = 'eng.html';
    }

    // now we have a valid URL in our `url` variable
    window.location.href = url;
}

这就是您在这里需要做的一切；无需反复检查 if 语句，只需简单查找即可。而当您想添加另一种语言时，您只需在languageUrls 对象中添加另一个条目即可。

类似的想法可以应用于您的语言函数，它会更改存储在本地存储中的语言。与其拥有多个不同的函数，不如拥有一个将语言作为参数的函数，然后再次使用查找来更改 URL：

function changeLanguage (language) {
    // it’s always a good idea to normalize input;
    // in this case, keep everything lower-case
    language = language.toLowerCase();

    // this time, we might want to make sure first that the language is
    // valid – all valid languages are stored in our `languageUrls` object,
    // so we can use that
    var url = languageUrl[language];

    if (!url) {
        // There was no entry for the language—it’s not a valid language—so
        // we just return from the function here, not doing anything. We could
        // show an error though.
        return;
    }

    // so the language is valid, and the target URL is stored in `url`

    if (typeof(Storage) !== 'undefined') {
        // update the stored language; note that I’m not calling `clear`
        // because we might want to store other information in the future
        // too. It’s enough to just overwrite the stored language.
        localStorage.language = language;
    }

    // we still want to redirect, even if the storage was not available
    window.location.href = url;
}

这已经是您需要设置的所有内容了。剩下的就是将调用从 english() 更改为 changeLanguage('english') 等。

Answer 2

您遇到的问题是使用 = 而不是 === 进行比较（如 wonko79 所述）。至于如何改进你所做的代码 - 这里有很多问题，最重要的是重复检查什么和应用什么的信息，这是一个危险，因为它使维护变得困难。我使用一个对象来存储有关语言的所有信息并创建接口以从同一数据集中选择语言，从而为您的问题提供了一个解决方案：

var locales = {
    'us': {label: 'English',location:'english.html'},
    'de': {label: 'German',location: 'german.html'},
    'fr': {label: 'Français',location: 'french.html'},
    'nl': {label: 'Nederlands',location: 'dutch.html'}       
};

http://jsfiddle.net/codepo8/KzNUM/

我还写了一篇更长的博客文章，其中包含更多详细信息http://christianheilmann.com/2014/01/08/this-developer-wanted-to-create-a-language-selector-and-asked-for-help-on-twitter-you-wont-believe-what-happened-next/

Answer 3

据我所知，你是做分配而不是比较。

以下代码应该可以工作：

    window.onload = function() {
    if (localStorage.language=="Language")
      {
       window.location.href = "language.html";
      }
    else if (localStorage.language=="English")
      {
       window.location.href = "eng.html";
      }
    else if (localStorage.language=="French")
      {
      window.location.href = "french.html";
      }
    else if (localStorage.language=="Spanish")
      {
      window.location.href = "spanish.html";
      }

更多信息请参见JavaScript Comparison and Logical Operators。