多语言切换方案：localStorage实现方法

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《多语言切换持久化，localStorage 实现方案》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

引言：理解多语言切换的挑战

在构建多语言网站时，一个常见的需求是用户选择的语言能够在不同页面间或刷新后保持不变。然而，许多初学者在实现语言切换功能时，常遇到的问题是语言选择仅在当前页面生效，一旦用户导航到其他页面或刷新浏览器，语言就会恢复到默认状态。

提供的代码片段展示了一个典型的客户端语言切换实现：通过 jQuery 监听语言选择按钮的点击事件，然后直接修改页面上各个元素的文本内容。例如：

// Netherlands language switch
$(function() {
    $(".nl").click(function() {
        // Language Select
        $(".language-selected").text("nl-NL");
        $(".language-selected").removeClass("change-en");
        $(".language-selected").addClass("change-nl");

        // Navbar
        $("#navbar-over-ons").text("Over Ons");
        $("#navbar-winkel").text("Winkel");
        // ... 更多元素文本修改
    });
});

// English language switch
$(function() {
    $(".en").click(function() {
        // Language Select
        $(".language-selected").text("en-US");
        $(".language-selected").removeClass("change-nl");
        $(".language-selected").addClass("change-en");

        // Navbar
        $("#navbar-over-ons").text("About Us");
        $("#navbar-winkel").text("Store");
        // ... 更多元素文本修改
    });
});

这种方法的问题在于，所有的语言切换操作都是在浏览器端（客户端）通过 JavaScript 对当前页面的 DOM 进行实时修改。当用户访问新页面时，浏览器会重新加载整个页面，JavaScript 代码会重新执行，而之前通过点击事件进行的 DOM 修改则会丢失。因此，我们需要一种机制来“记住”用户的语言选择。

解决方案：使用 localStorage 实现前端持久化

为了解决语言选择不持久的问题，我们可以利用浏览器提供的客户端存储机制。其中，localStorage 是一种简单且常用的选择。

localStorage 简介

localStorage 是 Web Storage API 的一部分，它允许网站在用户的浏览器中存储键值对数据。其主要特点包括：

• 持久性： 存储的数据没有过期时间，除非用户手动清除浏览器数据，否则数据会一直保留。
• 同源策略： 每个源（协议、域名、端口）都有独立的 localStorage 空间，不同源之间的数据不能互相访问。
• 容量： 通常提供 5MB 左右的存储空间。
• 简单易用： 提供 setItem()、getItem()、removeItem() 等方法进行操作。

核心思路

使用 localStorage 实现语言持久化的核心思路如下：

1. 保存语言偏好： 当用户点击语言切换按钮时，除了修改页面内容，还将当前选择的语言代码（例如 nl 或 en）存储到 localStorage 中。
2. 加载时应用偏好： 每次页面加载时，首先检查 localStorage 中是否存在已保存的语言偏好。如果存在，则根据该偏好自动将页面内容切换到对应的语言；如果不存在，则应用默认语言。

实现步骤与代码示例

为了更好地集成 localStorage，我们可以将原有的语言切换逻辑封装成独立的函数。

步骤一：封装语言切换逻辑为函数

将荷兰语和英语的切换逻辑分别封装到 applyDutchLanguage() 和 applyEnglishLanguage() 函数中。这样，这些函数不仅可以在用户点击时调用，也可以在页面加载时调用。

// 封装荷兰语切换逻辑
function applyDutchLanguage() {
    // 语言选择器显示
    $(".language-selected").text("nl-NL").removeClass("change-en").addClass("change-nl");

    // 导航栏
    $("#navbar-over-ons").text("Over Ons");
    $("#navbar-winkel").text("Winkel");
    $("#navbar-beoordelingen").text("Beoordelingen");
    $("#navbar-contact").text("Contact");
    $("#navbar-portfolio").text("Portfolio");
    $("#navbar-winkelwagen").text("Winkelwagen");

    // 页脚
    $("#footer-diensten").text("Diensten");
    $("#footer-over").text("Over");
    $("#footer-overig").text("Overig");
    $("#footer-winkel").text("Winkel");
    $("#footer-over-ons").text("Over Ons");
    $("#footer-beoordelingen").text("Beoordelingen");
    $("#footer-contact").text("Contact");
    $("#footer-portfolio").text("Portfolio");
    $("#footer-changelog").text("Changelog");

    // 首页内容（仅示例部分）
    $("#index-producten").text("Producten");
    $("#index-keuzes").text("U kunt kiezen uit deze 4 keuzes");
    $("#index-air-photo").text("Lucht Foto");
    $("#index-air-photo-paragraph").text("We maken meerdere foto's waaruit u kunt kiezen, in verschillende hoeken en hoogtes.");
    // ... 更多荷兰语文本内容
}

// 封装英语切换逻辑
function applyEnglishLanguage() {
    // 语言选择器显示
    $(".language-selected").text("en-US").removeClass("change-nl").addClass("change-en");

    // 导航栏
    $("#navbar-over-ons").text("About Us");
    $("#navbar-winkel").text("Store");
    $("#navbar-beoordelingen").text("Reviews");
    $("#navbar-contact").text("Contact");
    $("#navbar-portfolio").text("Portfolio");
    $("#navbar-winkelwagen").text("Cart");

    // 页脚
    $("#footer-diensten").text("Services");
    $("#footer-over").text("About");
    $("#footer-overig").text("Other");
    $("#footer-winkel").text("Store");
    $("#footer-over-ons").text("About Us");
    $("#footer-beoordelingen").text("Reviews");
    $("#footer-contact").text("Contact");
    $("#footer-portfolio").text("Portfolio");
    $("#footer-changelog").text("Changelog");

    // 首页内容（仅示例部分）
    $("#index-producten").text("Products");
    $("#index-keuzes").text("You can choose from these 4 choices");
    $("#index-air-photo").text("Air Photo");
    $("#index-air-photo-paragraph").text("We take multiple photos for you to choose from, at different angles and heights.");
    // ... 更多英语文本内容
}

步骤二：保存语言偏好到 localStorage

在语言切换函数内部，添加 localStorage.setItem('lang', '...') 来保存当前选择的语言代码。

// 封装荷兰语切换逻辑
function applyDutchLanguage() {
    // ... 原有的DOM操作
    localStorage.setItem("lang", "nl"); // 保存语言偏好
}

// 封装英语切换逻辑
function applyEnglishLanguage() {
    // ... 原有的DOM操作
    localStorage.setItem("lang", "en"); // 保存语言偏好
}

步骤三：页面加载时自动应用语言

在脚本的顶部，添加逻辑来检查 localStorage 中的语言偏好，并在页面加载时自动应用。

$(document).ready(function() { // 确保DOM加载完成后执行
    const savedLang = localStorage.getItem("lang");

    if (savedLang === "en") {
        applyEnglishLanguage();
    } else if (savedLang === "nl") {
        applyDutchLanguage();
    } else {
        // 如果没有保存的语言，设置一个默认语言（例如荷兰语）并应用
        applyDutchLanguage(); // 默认应用荷兰语
        localStorage.setItem("lang", "nl"); // 并保存为默认
    }

    // 为语言切换按钮添加事件监听器
    $(".nl").click(function(e) {
        e.preventDefault(); // 阻止默认的链接跳转行为
        applyDutchLanguage();
    });

    $(".en").click(function(e) {
        e.preventDefault(); // 阻止默认的链接跳转行为
        applyEnglishLanguage();
    });
});

整合后的 JavaScript 代码示例

将上述所有逻辑整合到您的 JavaScript 文件中：

// 封装荷兰语切换逻辑
function applyDutchLanguage() {
    $(".language-selected").text("nl-NL").removeClass("change-en").addClass("change-nl");
    $("#navbar-over-ons").text("Over Ons");
    $("#navbar-winkel").text("Winkel");
    $("#navbar-beoordelingen").text("Beoordelingen");
    $("#navbar-contact").text("Contact");
    $("#navbar-portfolio").text("Portfolio");
    $("#navbar-winkelwagen").text("Winkelwagen");
    $("#footer-diensten").text("Diensten");
    $("#footer-over").text("Over");
    $("#footer-overig").text("Overig");
    $("#footer-winkel").text("Winkel");
    $("#footer-over-ons").text("Over Ons");
    $("#footer-beoordelingen").text("Beoordelingen");
    $("#footer-contact").text("Contact");
    $("#footer-portfolio").text("Portfolio");
    $("#footer-changelog").text("Changelog");
    $("#index-producten").text("Producten");
    $("#index-keuzes").text("U kunt kiezen uit deze 4 keuzes");
    $("#index-air-photo").text("Lucht Foto");
    $("#index-air-video").text("Lucht Video");
    $("#index-air-combination").text("Lucht Combinatie");
    $("#index-complete-package").text("Complete Pakket");
    $("#index-air-photo-paragraph").text("We maken meerdere foto's waaruit u kunt kiezen, in verschillende hoeken en hoogtes.");
    $("#index-air-video-paragraph").text("Wij maken een video in verschillende hoeken, hoogtes en bereik van uw wensen.");
    $("#index-air-combination-paragraph").text("Wij maken een combinatie van video's en foto's.");
    $("#index-complete-package-paragraph").text("Wij maken meerdere foto's en video's voor bijvoorbeeld bruiloften en zijn in te huren voor langere tijd.");
    $("#index-lees-verder").text("Lees Verder»");
    $("#index-faq").text("FAQ");
    $("#index-faq-v1").text("Als ik iets haal, Hoe kan ik dan betalen?");
    $("#index-faq-v2").text("Waar kan ik met vragen terecht?");
    $("#index-faq-v3").text("Als ik niet tevreden ben, kan ik dan een refund krijgen?");
    $("#index-faq-v4").text("Als ik iets haal kan ik dan annuleren?");
    $("#index-faq-v5").text("Wat als het slecht weer is, krijg ik dan regen foto's?");
    $("#index-faq-a1").text("U moet gelijk betalen via onze site tijdens het bestellen van een van onze diensten.");
    $("#index-faq-a2").text("U kunt ons contacteren via het kopje 'Contact' Op onze site voor enige vragen over onze diensten.");
    $("#index-faq-a3").text("U kan geen refund krijgen, We kunnen u wel korting geven op uw volgende bestelling bij Prof Sky Shot.");
    $("#index-faq-a4").text("U kan uw dienst annuleren, U moet dit dan wel 24 uur van te voren doen. Of u kan een andere tijd afspreken met onze medewerkers, Dit moet wel 24 uur van te voren gedaan worden. Dit kan allemaal gedaan worden via onze 'Contact'  pagina op onze site.");
    $("#index-faq-a5").text("Met slecht weer word er een andere tijd afgesproken met u en onze medewerkers, Tenzij het een van onze speciale diensten zijn zoals de 'Complete Package'. Dan gaan we verder in de regen.");
    $("#website-changelog").text("Website Changelog");
    $("#changelog-pagina").text("Pagina");
    $("#changelog-tijd").text("Tijd");
    $("#changelog-toegevoegt").text("Toegevoegt");
    $("#changelog-Bug-Fix").text("Bug-Fix");
    $("#changelog-aangepast-toegevoegt").text("Aangepast-Toegevoegt");
    $("#changelog-item-pagina").text("Changelog Pagina");
    $("#niet-klaar-popup").text("Niet Klaar Popup");
    $("#aparthotel-las-mariposas-features-lees-meer-knop").text("Aparthotel Las Mariposas Features Lees Meer Knop");
    $("#pagina-kopje").text("Pagina Kopje");
    $("#404-pagina-niet-gevonden").text("Pagina niet gevonden!");
    $("#404-pagina-niet-gevonden-paragraph").text("Deze pagina is niet gevonden, druk op de knop hieronder om terug te gaan naar de vorige pagina.");
    $("#404-ga-terug").text("Ga Terug!");
    $("#aparthotel-las-mariposas-features").text("Features");
    $("#aparthotel-las-mariposas-features-klik-hier").text("Klik Hier");
    $("#aparthotel-las-mariposas-apparatuur").text("Apparatuur");
    $("#aparthotel-las-mariposas-locatie").text("Locatie");
    $("#aparthotel-las-mariposas-contact").text("Contact");
    $("#aparthotel-las-mariposas-over-ons").text("Over Ons");
    $("#aparthotel-las-mariposas-apparatuur-paragraph").text("Elke appartement is in bezit van een: Kluis, Koelkast, Magnetron, Broodrooster, Waterkoker, Eigen badkamer, Nieuwe matras, 90X200 Bedden, Terras met tafel met stoelen, Satelliet/Kleuren TV, Eettafel en stoelen, Volledig ingerichte kitchenette, Bed- en badlinnen aanwezig, Comfortabel loungemeubilair.");
    $("#aparthotel-las-mariposas-locatie-paragraph").text("Het hotel zit dichtbij het strand, er zit een tankstation dichtbij, een ziekenhuis een paar restaurants en een paar winkels.");
    $("#aparthotel-las-mariposas-contact-paragraph").text("U kunt ons contacteren op het Telefoon Nummer:");
    $("#aparthotel-las-mariposas-contact-paragraph-email").text("Of E-Mail Adres:");
    $("#cancel-betaling-mislukt").text("Betaling Mislukt!");
    $("#cancel-betaling-komt-niet-door").text("De betaling kon niet door komen, neem a.u.b. contact met ons op!");
    $("#contact-contacteer-ons").text("Contacteer Ons");
    $("#contact-faq").text("FAQ");
    $("#contact-faq-v1").text("Als ik iets haal, Hoe kan ik dan betalen?");
    $("#contact-faq-v2").text("Waar kan ik met vragen terecht?");
    $("#contact-faq-v3").text("Als ik niet tevreden ben, kan ik dan een refund krijgen?");
    $("#contact-faq-v4").text("Als ik iets haal kan ik dan annuleren?");
    $("#contact-faq-v5").text("Wat als het slecht weer is, krijg ik dan regen foto's?");
    $("#contact-faq-a1").text("U moet gelijk betalen via onze site tijdens het bestellen van een van onze diensten.");
    $("#contact-faq-a2").text("U kunt ons contacteren via het kopje 'Contact' Op onze site voor enige vragen over onze diensten.");
    $("#contact-faq-a3").text("U kan geen refund krijgen, We kunnen u wel korting geven op uw volgende bestelling bij Prof Sky Shot.");
    $("#contact-faq-a4").text("U kan uw dienst annuleren, U moet dit dan wel 24 uur van te voren doen. Of u kan een andere tijd afspreken met onze medewerkers, Dit moet wel 24 uur van te voren gedaan worden. Dit kan allemaal gedaan worden via onze 'Contact'  pagina op onze site.");
    $("#contact-faq-a5").text("Met slecht weer word er een andere tijd afgesproken met u en onze medewerkers, Tenzij het een van onze speciale diensten zijn zoals de 'Complete Package'. Dan gaan we verder in de regen.");
    $("#order-order-id").text("Order#ID");
    $("#order-order-id-paragraph").text("Hier kunt u uw foto's en video's downloaden");
    $("#order-disclaimer").text("DISCLAIMER: Alles word na 48 uur verwijdert!");
    $("#orderstatus-order-details").text("Uw Bestellings Gegevens!");
    $("#over-ons-ons-bedrijf").text("Ons Bedrijf");
    $("#over-ons-ons-bedrijf-paragraph").text("Wij zijn een startend bedrijf, ik heb zelf een passie voor het vliegen met drones en fotografie, toen ik op vakantie was kon ik de omgeving van het hotel waar ik heen ging niet vinden en daarom kwam ik op het idee om dit bedrijf te starten. Ik zou graag hun belangrijke momenten voor mensen vastleggen en zelf wat zakgeld verdienen, ik heb net een dronepilootlicentie gekregen om legaal te kunnen vliegen, ik heb ook een kamer van koophandel gekocht. We gebruiken een professionele drone, we maken foto's en video's in 4K-kwaliteit, we hebben een zeer groot vlieggebied zodat we zeer mooie omgevingsfilms kunnen maken, zonder schokken en schieten met een zeer goede beeldkwaliteit.");
    $("#portfolio-onze-portfolio").text("Onze Portfolio

终于介绍完啦！小伙伴们，这篇关于《多语言切换方案：localStorage实现方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！