Skip to main content
T
ThatMistGuy
Participant
August 19, 2020
Question

Save and Load Data to Local Machine

  • August 19, 2020
  • 2 replies
  • 311 views

Hello there,

Currently I am trying to implement website localization, so that the users would be able to switch between different languages.

I couldn't find much valuable information about this topic. What I thought of is save some file to the users local machine, like a json file, where I would store some values. Let's say language integer. If 0 one language, if 1 another and so on.

One problem is that I'm not sure how to do that.

 

How do I save a file and then load it again once the page is loaded and how would I read the data from the file? Also are there any better solutions to this problem? Thank you

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 19, 2020

Ideally, your site would be dynamically driven with content stored in a server-side database.  SQL queries  pull up the requested language and stored sessions remember it for as long as the user remains on your site.  See this basic tutorial from PHPPot

https://phppot.com/php/multi-language-support-to-website-using-php/

 

Alternatively, you could create your site with WordPress and use the WPML plugin.

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
August 19, 2020

Not quite sure what is you are describing but it sounds like you might be able to do it in Javascript IF you are not using a database to store/select the various languages.

 

You can create a javascript file for each of the languages and link each file to your page. Then onclick of a language button insert the selected language into their various html containers, whilst keeping constant any element that is generic to all the languages, like images, as you dont really want to double up on that information.

 

Example below:

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Load Languages</title>
 </head>
 <body>
	 
<button class="btn" data-lang="English">English</button>
<button class="btn" data-lang="German">German</button>
<button class="btn" data-lang="French">French</button>

<header class="header"></header> 
<section class="main"></section>
<footer class="footer"></footer>
 
 
<script>
const header = document.querySelector('.header');
const main = document.querySelector('.main');
const footer = document.querySelector('.footer');
const btn = document.querySelectorAll('.btn');

btn.forEach(function(btn) {
btn.onclick = function() {
const selectedLanguage = this.getAttribute('data-lang');
switch (selectedLanguage) {
case 'English': english();
break;
case 'German': german();
break;
case 'French': french();
break;
default:  english();
}
}
})

function english() {
header.innerHTML = `
<h1>English header</h1>
`;
main.innerHTML = `
<p>This is English main text</h1>
`;
footer.innerHTML = `
<p>English footer Information</p>
`;
}

function german() {
header.innerHTML = `
<h1>German header</h1>
`;
main.innerHTML = `
<p>This is German main text</h1>
`;
footer.innerHTML = `
<p>German footer Information</p>
`;
}

function french() {
header.innerHTML = `
<h1>French header</h1>
`;
main.innerHTML = `
<p>This is French main text</h1>
`;
footer.innerHTML = `
<p>French footer Information</p>
`;
}

english();
	 
</script>
 </body>
 </html>

 

 

 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices