2

I am trying to create a website that shows the selected language page at first visit. On click of the language name, the language name string (eg. French) gets stored in the web/local storage. And when the next time user visits the website, the language string is checked and specific language page is shown. I have written twelve functions for storing the language string on click of anchor tag of each language. Like this:

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";
  }
}

Is this method really efficient? I think creating multiple pages for multiple language is good for SEO rather than changing the text string on the fly. Till here when I check the Chrome developers console, the value of the string gets stored. But when I close the tab or the browser window the stored value is gone and the next time it cannot remember the language.

I am checking the language using this code (I have to do it for 12 languages):

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";
  }

The code kinda stops after checking the first 'if' condition, true or false it just stops there and doesn't check the 'else if' condition beyond that.

Can someone please help me this?? The sample codes seems to store the value in web storage even after browser close but I cannot replicate it in mine.

4

3 回答 3

8

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

于 2014-01-08T14:48:09.687 回答
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()to更改为changeLanguage('english')等。

于 2014-01-08T15:04:08.607 回答
0

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

以下代码应该可以工作：

    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 比较和逻辑运算符。

于 2014-01-07T15:37:30.743 回答