LocalStorage, сессия или как сохранить выбор языка

@AlerinGustovski · Регистрация: 22.04.2021

Студворк — интернет-сервис помощи студентам

Привет, форумчане.
Дело такое, имеются кнопки для переключения языка и скрипт. Хотелось бы все это обернуть в localestorage, чтобы при смене страницы сохранялся выбранный язык.

HTML5
1
2
3
4
5
6
<div class="col text-end">
    <button id="en" class="header-item-lang-en translate btn btn-sm btn-market">EN</button>
</div>
<div class="col text-start">
    <button id="ru" class="header-item-lang-en translate btn btn-sm btn-market">RU</button>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
$(function () {
    $('.translate').click(function () {
        var lang = $(this).attr('id');
 
        $('.lang').each(function (index, item) {
            $(this).text(arrLang[lang][$(this).attr('key')]);
        });
    });
});

@amr-now · 16.07.2021, 11:44

Здравствуйте.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="col text-end">
        <button id="en" class="header-item-lang-en translate btn btn-sm btn-market">EN</button>
    </div>
    <div class="col text-start">
        <button id="ru" class="header-item-lang-en translate btn btn-sm btn-market">RU</button>
    </div>
    <script>
        let lng;
        $(document_load);
 
        function document_load() {
            lng = localStorage.getItem("lng") || "ru";
            $("#" + lng).addClass("active");
            $(".header-item-lang-en.translate.btn.btn-sm.btn-market").click(btn_click);
        }
 
        function btn_click() {
            if (this.classList.contains("active")) return;
 
            $("#" + lng).removeClass("active");
            lng = this.id;
            this.classList.add("active");
            localStorage.setItem("lng", lng);
        }
    </script>
</body>
</html>

И опять страница успевает моргнуть перед тем, как начнет исполняться скрипт на событии загрузки страницы.

Буду признателен, если кто подскажет правильное решение проблемы моргания.

@AlerinGustovski · 20.07.2021, 04:49 **[ТС]**

Ваш скрипт не заработает.
Я решил этот вопрос. Ниже код, который позволит вам сохранять сессию все в сессию и считывать ее.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let lang = 'en';;
$(function() {
    if(localStorage.getItem('lang'))
    {
        lang = localStorage.getItem('lang')
        loadLangage();
    }
    $('.translate').click(function() {
        lang = $(this).attr('id');
 
        loadLangage();
        localStorage.setItem('lang', lang);
    });
});
function loadLangage(){
    $('.lang').each(function() {
        if(arrLang[lang] == undefined)
            lang = 'en';
        $(this).text(arrLang[lang][$(this).attr('key')]);
    });
}

@DrType · 20.07.2021, 12:52

Сообщение от AlerinGustovski

Ваш скрипт не заработает.

Однако он работает.

@AlerinGustovski · 22.07.2021, 08:07 **[ТС]**

Немного исправил скрипт, так как прошлый при жесткой перезагрузке с чисткой кеша не вытягивал стандартный установленный язык.

Вот более правильный код для моего решения.

Для более подробного описания функции скажу, что функция ищет на сайте все вставки с о ловами с классом lang (для перевода), а также ищет ключ, соответствующий данному слову. К примеру:

HTML5
1
<div class="h3 btn lang" key="Hello"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let lang = 'en';
$(function() {
    if(localStorage.getItem('lang'))
    {
        lang = localStorage.getItem('lang');
    }
    loadLanguage();
    $('.translate').on('click', (e) => {
        lang = e.target.id;
 
        loadLanguage();
        localStorage.setItem('lang', lang);
    });
});
function loadLanguage(){
    $('.lang').each(function() {
        if(arrLang[lang] == undefined)
            lang = 'en';
        $(this).text(arrLang[lang][$(this).attr('key')]);
    });
}

Комментарий модератора

Используйте кнопки языков программирования в редакторе сообщений для выделения кода.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .