Vanilla JS localStorage сохраняет данные при обновлении

Я использую vanilla JS и хочу сохранять данные на localStorage при обновлении страницы:

Main.js

localStorage.setItem("language", "ar");

const toEnglish = (e) => {
  if (e.target.closest(".english")) {
    localStorage.setItem("language", "en");
  }
};

document.addEventListener("click", (e) => toEnglish(e));

Однако после установки language на en на localStorage, если страница обновляется, значение сбрасывается на ar, интересно, почему оно не сохраняет значение, как в reactJS?

Это происходит потому, что при каждой загрузке страницы вы меняете язык на ar

kennarddh 11.11.2022 07:06
if (!localStorage.getItem("language")) localStorage.setItem("language", "ar") вы можете установить ar по умолчанию, только если значение еще не установлено
adiga 11.11.2022 07:09

Я вижу, на самом деле не думал об этом после решения большой проблемы, немного устал

aasem shoshari 11.11.2022 07:48
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
3
56
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Это происходит потому, что при каждой загрузке страницы вы меняете язык на ar

Вам нужно проверить, установлен ли язык

if (!localStorage.getItem("language")) {
  localStorage.setItem("language", "ar");
}

const toEnglish = (e) => {
  if (e.target.closest(".english")) {
    localStorage.setItem("language", "en");
  }
};

document.addEventListener("click", (e) => toEnglish(e));

Основываясь на вашем коде, похоже, что вы устанавливаете значение language на 'ar' каждый раз, когда загружается страница, чтобы обойти это, проверив, имеет ли localStorage значение, установленное для language, попробуйте следующее:

const language = localStorage.getItem('language');

// check if language is not set
if (!language) {
  localStorage.setItem("language", "ar");
}

// The rest of your code

Добавлен дополнительный код, который может заставить ваш код работать.

const secondaryLanguage = localStorage.getItem("language-secondary");
localStorage.setItem("language", secondaryLanguage ?? "ar");

const toEnglish = (e) => {
  if (e.target.closest(".english")) {
    localStorage.setItem("language-secondary", "en"); //change the key
  }
};

document.addEventListener("click", (e) => toEnglish(e));

Другие вопросы по теме