How to get the browser language and redirect to the appropriate page

Hello, this is "Bunkei", an intern. I am currently in my fourth year of university and belong to the Faculty of Liberal Arts. I started working at PIPELINE as an intern and have been involved in the learning and development of various languages. I would like to share the tips I got from it.

How to use session storage in JavaScript

Session storage is a type of web storage used for temporary data storage. sessionStorage object to store data in the browser and access it at any time during that session.

For example, set the value to the session storage as follows:

sessionStorage.setItem('key', 'value');

How to get and save the user's language settings >

Learn how to get language settings from a user's browser settings and session information. The following function getUserLanguage first checks the session storage and returns the user's language settings if they exist there. If not, extract the language from your browser settings.

function getUserLanguage() {
return sessionStorage.getItem('userLanguage') || navigator.language.substr(0, 2);
}

Next, we'll show you how to store the user's language in session storage with the saveLanguageToSession function. This is done when a user visits your site for the first time.

function saveLanguageToSession() {
if (!sessionStorage.getItem('userLanguage')) {
const language = getLanguageFromPath();
sessionStorage.setItem('userLanguage', language);
console.log(`Saved user language: ${language}`);
} else {
console.log(`User language already set: ${getUserLanguage()}`);
}
}

How to determine the language from the URL path >

You can also look at the path part of the URL to determine the user's language. For example, we created a function like this:

function getLanguageFromPath() {
const path = window.location.pathname;
if (path.startsWith('/jp/')) return 'jp';
if (path.startsWith('/ch/')) return 'zh';
return 'en';
}

How to implement redirect handling on first visit >

Redirect processing is designed to automatically redirect users to pages that match their language when they first visit your site. The following function redirectOnFirstVisit redirects users based on their language settings when they first visit your site.

function redirectOnFirstVisit() {
saveLanguageToSession();

const language = getUserLanguage();
const path = window.location.pathname;

const isJapanesePath = path.startsWith('/jp/');
const isChinesePath = path.startsWith('/ch/');

const shouldRedirectToJapanese = language === 'jp' && !isJapanesePath;
const shouldRedirectToChinese = language === 'zh' && !isChinesePath;
const shouldRedirectToEnglish = language === 'en' && (isJapanesePath || isChinesePath);

if (shouldRedirectToJapanese) {
window.location.href = '/jp/';
} else if (shouldRedirectToChinese) {
window.location.href = '/ch/';
} else if (shouldRedirectToEnglish) {
window.location.href = '/';
}
}

Summary: Language Setting and Redirect Handling in JavaScript

In this article, we explained how to use JavaScript to retrieve and save language settings and redirect first-time visitors to the appropriate page. These features will be very useful when creating a multilingual website. Continue learning JavaScript and become more comfortable implementing various interactive features.

Full text of the code

Function to get the user's configuration language
function getUserLanguage() {
return sessionStorage.getItem('userLanguage') || navigator.language.substr(0, 2);
}

Functions to store language information in the session on first visit
function saveLanguageToSession() {
if (!sessionStorage.getItem('userLanguage')) {
const language = getLanguageFromPath();
sessionStorage.setItem('userLanguage', language);
console.log(`Saved user language: ${language}`);
} else {
console.log(`User language already set: ${getUserLanguage()}`);
}
}

Functions to estimate languages from URL paths
function getLanguageFromPath() {
const path = window.location.pathname;
if (path.startsWith('/jp/')) return 'jp';
if (path.startsWith('/ch/')) return 'zh';
return 'en';
}

Functions that redirect to the appropriate page on the first visit
function redirectOnFirstVisit() {
saveLanguageToSession();

const language = getUserLanguage();
const path = window.location.pathname;

const isJapanesePath = path.startsWith('/jp/');
const isChinesePath = path.startsWith('/ch/');

const shouldRedirectToJapanese = language === 'jp' && !isJapanesePath;
const shouldRedirectToChinese = language === 'zh' && !isChinesePath;
const shouldRedirectToEnglish = language === 'en' && (isJapanesePath || isChinesePath);

if (shouldRedirectToJapanese) {
window.location.href = '/jp/';
} else if (shouldRedirectToChinese) {
window.location.href = '/ch/';
} else if (shouldRedirectToEnglish) {
window.location.href = '/';
}
}

Perform language determination and redirects on the first visit
redirectOnFirstVisit();

おすすめ記事

How to get the browser language and redirect to the appropriate page

How to get the browser language and redirect to the appropriate page

How to get the browser language and redirect to the appropriate page

How to get the browser language and redirect to the appropriate page

How to get the browser language and redirect to the appropriate page

How to get the browser language and redirect to the appropriate page