Question

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

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'条件后停止，true或false它只是在那里停止并且不检查超出该条件的'else if'条件。

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

Answer 1

你遇到的问题是使用=而不是===进行比较（如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 2

正如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 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。

用于网站本地化的Web存储

3 个答案: