Translate Button on website - Saving the users language preference

up vote
-1
down vote

favorite

So with my limited JavaScript skills I have created a simple translate button. When you click the button it changes the text on the webpage you are on to either English or Chinese.

How would I go about making these changes stay when someone goes to different webpages or even refreshes the page? I have tried experimenting with the localStorage technique but to no luck.

Here is my JS code for the translate button:

// onclick behavior

$('.lang').click('touchstart', function() {

  var lang = $(this).attr('id'); // obtain language id



  // translate all translatable elements

  $('.tr').each(function(i) {

    $(this).text(aLangKeys[lang][$(this).attr('key')]);

  });



});



// preparing language file

var aLangKeys = new Array();



aLangKeys['en'] = new Array();

aLangKeys['ch'] = new Array();



aLangKeys['en']['home'] = 'Home';

aLangKeys['en']['about'] = 'About Us';

aLangKeys['en']['serv'] = 'Services';

aLangKeys['en']['sem'] = 'Search Engine Marketing';

aLangKeys['en']['webdev'] = 'Website Development';



aLangKeys['ch']['home'] = '首页';

aLangKeys['ch']['about'] = '关于我们';

aLangKeys['ch']['serv'] = '服务';

aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

For local storage I have added in this right under the var = aLangKeys = new array.

localStorage.setItem("aLangKeys", aLangKeys);

var someVarName = localStorage.getItem("aLangKeys");

Thanks!

edited Nov 19 at 0:00

asked Nov 18 at 23:53

Brock Erwin

Can you please include your attempt with using LocalStorage as this will give myself and others something to work with rather than having to write a full solution for you. Thank you.
– NewToJS
Nov 18 at 23:56

Sorry! I have added in what I have done for LocalStorage
– Brock Erwin
Nov 19 at 0:01

add a comment |

up vote
-1
down vote

favorite

So with my limited JavaScript skills I have created a simple translate button. When you click the button it changes the text on the webpage you are on to either English or Chinese.

How would I go about making these changes stay when someone goes to different webpages or even refreshes the page? I have tried experimenting with the localStorage technique but to no luck.

Here is my JS code for the translate button:

// onclick behavior

$('.lang').click('touchstart', function() {

  var lang = $(this).attr('id'); // obtain language id



  // translate all translatable elements

  $('.tr').each(function(i) {

    $(this).text(aLangKeys[lang][$(this).attr('key')]);

  });



});



// preparing language file

var aLangKeys = new Array();



aLangKeys['en'] = new Array();

aLangKeys['ch'] = new Array();



aLangKeys['en']['home'] = 'Home';

aLangKeys['en']['about'] = 'About Us';

aLangKeys['en']['serv'] = 'Services';

aLangKeys['en']['sem'] = 'Search Engine Marketing';

aLangKeys['en']['webdev'] = 'Website Development';



aLangKeys['ch']['home'] = '首页';

aLangKeys['ch']['about'] = '关于我们';

aLangKeys['ch']['serv'] = '服务';

aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

For local storage I have added in this right under the var = aLangKeys = new array.

localStorage.setItem("aLangKeys", aLangKeys);

var someVarName = localStorage.getItem("aLangKeys");

Thanks!

edited Nov 19 at 0:00

asked Nov 18 at 23:53

Brock Erwin

Can you please include your attempt with using LocalStorage as this will give myself and others something to work with rather than having to write a full solution for you. Thank you.
– NewToJS
Nov 18 at 23:56

Sorry! I have added in what I have done for LocalStorage
– Brock Erwin
Nov 19 at 0:01

add a comment |

up vote
-1
down vote

favorite

So with my limited JavaScript skills I have created a simple translate button. When you click the button it changes the text on the webpage you are on to either English or Chinese.

How would I go about making these changes stay when someone goes to different webpages or even refreshes the page? I have tried experimenting with the localStorage technique but to no luck.

Here is my JS code for the translate button:

// onclick behavior

$('.lang').click('touchstart', function() {

  var lang = $(this).attr('id'); // obtain language id



  // translate all translatable elements

  $('.tr').each(function(i) {

    $(this).text(aLangKeys[lang][$(this).attr('key')]);

  });



});



// preparing language file

var aLangKeys = new Array();



aLangKeys['en'] = new Array();

aLangKeys['ch'] = new Array();



aLangKeys['en']['home'] = 'Home';

aLangKeys['en']['about'] = 'About Us';

aLangKeys['en']['serv'] = 'Services';

aLangKeys['en']['sem'] = 'Search Engine Marketing';

aLangKeys['en']['webdev'] = 'Website Development';



aLangKeys['ch']['home'] = '首页';

aLangKeys['ch']['about'] = '关于我们';

aLangKeys['ch']['serv'] = '服务';

aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

For local storage I have added in this right under the var = aLangKeys = new array.

localStorage.setItem("aLangKeys", aLangKeys);

var someVarName = localStorage.getItem("aLangKeys");

Thanks!

edited Nov 19 at 0:00

asked Nov 18 at 23:53

Brock Erwin

So with my limited JavaScript skills I have created a simple translate button. When you click the button it changes the text on the webpage you are on to either English or Chinese.

How would I go about making these changes stay when someone goes to different webpages or even refreshes the page? I have tried experimenting with the localStorage technique but to no luck.

Here is my JS code for the translate button:

// onclick behavior

$('.lang').click('touchstart', function() {

  var lang = $(this).attr('id'); // obtain language id



  // translate all translatable elements

  $('.tr').each(function(i) {

    $(this).text(aLangKeys[lang][$(this).attr('key')]);

  });



});



// preparing language file

var aLangKeys = new Array();



aLangKeys['en'] = new Array();

aLangKeys['ch'] = new Array();



aLangKeys['en']['home'] = 'Home';

aLangKeys['en']['about'] = 'About Us';

aLangKeys['en']['serv'] = 'Services';

aLangKeys['en']['sem'] = 'Search Engine Marketing';

aLangKeys['en']['webdev'] = 'Website Development';



aLangKeys['ch']['home'] = '首页';

aLangKeys['ch']['about'] = '关于我们';

aLangKeys['ch']['serv'] = '服务';

aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

For local storage I have added in this right under the var = aLangKeys = new array.

localStorage.setItem("aLangKeys", aLangKeys);

var someVarName = localStorage.getItem("aLangKeys");

Thanks!

// onclick behavior

$('.lang').click('touchstart', function() {

  var lang = $(this).attr('id'); // obtain language id



  // translate all translatable elements

  $('.tr').each(function(i) {

    $(this).text(aLangKeys[lang][$(this).attr('key')]);

  });



});



// preparing language file

var aLangKeys = new Array();



aLangKeys['en'] = new Array();

aLangKeys['ch'] = new Array();



aLangKeys['en']['home'] = 'Home';

aLangKeys['en']['about'] = 'About Us';

aLangKeys['en']['serv'] = 'Services';

aLangKeys['en']['sem'] = 'Search Engine Marketing';

aLangKeys['en']['webdev'] = 'Website Development';



aLangKeys['ch']['home'] = '首页';

aLangKeys['ch']['about'] = '关于我们';

aLangKeys['ch']['serv'] = '服务';

aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

// onclick behavior

$('.lang').click('touchstart', function() {

  var lang = $(this).attr('id'); // obtain language id



  // translate all translatable elements

  $('.tr').each(function(i) {

    $(this).text(aLangKeys[lang][$(this).attr('key')]);

  });



});



// preparing language file

var aLangKeys = new Array();



aLangKeys['en'] = new Array();

aLangKeys['ch'] = new Array();



aLangKeys['en']['home'] = 'Home';

aLangKeys['en']['about'] = 'About Us';

aLangKeys['en']['serv'] = 'Services';

aLangKeys['en']['sem'] = 'Search Engine Marketing';

aLangKeys['en']['webdev'] = 'Website Development';



aLangKeys['ch']['home'] = '首页';

aLangKeys['ch']['about'] = '关于我们';

aLangKeys['ch']['serv'] = '服务';

aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

localStorage.setItem("aLangKeys", aLangKeys);

var someVarName = localStorage.getItem("aLangKeys");

localStorage.setItem("aLangKeys", aLangKeys);

var someVarName = localStorage.getItem("aLangKeys");

javascript html css

edited Nov 19 at 0:00

asked Nov 18 at 23:53

Brock Erwin

edited Nov 19 at 0:00

asked Nov 18 at 23:53

Brock Erwin

edited Nov 19 at 0:00

asked Nov 18 at 23:53

Brock Erwin

asked Nov 18 at 23:53

Brock Erwin

asked Nov 18 at 23:53

Brock Erwin

Can you please include your attempt with using LocalStorage as this will give myself and others something to work with rather than having to write a full solution for you. Thank you.
– NewToJS
Nov 18 at 23:56

Sorry! I have added in what I have done for LocalStorage
– Brock Erwin
Nov 19 at 0:01

add a comment |

Can you please include your attempt with using LocalStorage as this will give myself and others something to work with rather than having to write a full solution for you. Thank you.
– NewToJS
Nov 18 at 23:56

Sorry! I have added in what I have done for LocalStorage
– Brock Erwin
Nov 19 at 0:01

Can you please include your attempt with using LocalStorage as this will give myself and others something to work with rather than having to write a full solution for you. Thank you.
– NewToJS
Nov 18 at 23:56

Sorry! I have added in what I have done for LocalStorage
– Brock Erwin
Nov 19 at 0:01

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

LocalStorage only allows storing strings so you need to use JSON.stringify() and JSON.parse() when getting and setting.

But first you shouldn't be using new Array() for non numeric keys. What you are really doing is making an array like object when you do that

Change to:

var aLangKeys = {

     en :{},

     ch: {}

}; 

// .... other definitions

To set

localStorage.setItem("aLangKeys", JSON.stringify(aLangKeys));

To get

var someVarName = JSON.parse(localStorage.getItem("aLangKeys"));

answered Nov 19 at 0:23

charlietfl

137k1285118

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53366652%2ftranslate-button-on-website-saving-the-users-language-preference%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

LocalStorage only allows storing strings so you need to use JSON.stringify() and JSON.parse() when getting and setting.

But first you shouldn't be using new Array() for non numeric keys. What you are really doing is making an array like object when you do that

Change to:

var aLangKeys = {

     en :{},

     ch: {}

}; 

// .... other definitions

To set

localStorage.setItem("aLangKeys", JSON.stringify(aLangKeys));

To get

var someVarName = JSON.parse(localStorage.getItem("aLangKeys"));

answered Nov 19 at 0:23

charlietfl

137k1285118

add a comment |

up vote
1
down vote

LocalStorage only allows storing strings so you need to use JSON.stringify() and JSON.parse() when getting and setting.

But first you shouldn't be using new Array() for non numeric keys. What you are really doing is making an array like object when you do that

Change to:

var aLangKeys = {

     en :{},

     ch: {}

}; 

// .... other definitions

To set

localStorage.setItem("aLangKeys", JSON.stringify(aLangKeys));

To get

var someVarName = JSON.parse(localStorage.getItem("aLangKeys"));

answered Nov 19 at 0:23

charlietfl

137k1285118

add a comment |

up vote
1
down vote

LocalStorage only allows storing strings so you need to use JSON.stringify() and JSON.parse() when getting and setting.

But first you shouldn't be using new Array() for non numeric keys. What you are really doing is making an array like object when you do that

Change to:

var aLangKeys = {

     en :{},

     ch: {}

}; 

// .... other definitions

To set

localStorage.setItem("aLangKeys", JSON.stringify(aLangKeys));

To get

var someVarName = JSON.parse(localStorage.getItem("aLangKeys"));

answered Nov 19 at 0:23

charlietfl

137k1285118

LocalStorage only allows storing strings so you need to use JSON.stringify() and JSON.parse() when getting and setting.

But first you shouldn't be using new Array() for non numeric keys. What you are really doing is making an array like object when you do that

Change to:

var aLangKeys = {

     en :{},

     ch: {}

}; 

// .... other definitions

To set

localStorage.setItem("aLangKeys", JSON.stringify(aLangKeys));

To get

var someVarName = JSON.parse(localStorage.getItem("aLangKeys"));

answered Nov 19 at 0:23

charlietfl

137k1285118

answered Nov 19 at 0:23

charlietfl

137k1285118

answered Nov 19 at 0:23

charlietfl

137k1285118

answered Nov 19 at 0:23

charlietfl

137k1285118

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr