如何实现网页多语言切换的持久化：基于 localStorage 的前端解决方案-html教程-PHP中文网

如何实现网页多语言切换的持久化：基于 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 实现语言持久化的核心思路如下：

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

实现步骤与代码示例

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

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

PHPShops多用户商城系统

随着电子商务模式更加多样化，企业和个人的迫切需求，PHPShops多用户商城系统正可以为其提供专业的电子商务解决方案。社区化电子商务，主要面向行业类和地方门户类站点。 PHPShops多用户商城系统（简称PHPShops）是基于电子商务的一套平台交易系统，它采用目前最流行网站建设工具PHP＋MYSQL，实现模版分离技术，通过HTML交互式网页技术来实行客户端与服务器端的交流。无论在

查看详情

将荷兰语和英语的切换逻辑分别封装到 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 的前端解决方案的详细内容，更多请关注php中文网其它相关文章！