Как установить «локальное хранилище для атрибута в jquery»?

Question

Я разрабатываю свой собственный сайт, и он поддерживает несколько тем, например тему (светлая и темная), когда вы выбираете опцию, она применяет тему, и никаких проблем с ней не возникает, но когда вы перезагружаете страницу, вам нужно снова выбрать тему.

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

HTML Code

• Голова

  • <link rel=stylesheet" href="view/light-view.css"> Тема по умолчанию меняется после пользователявыберите тему и замените light-view.css на имя темы.

• Body

  • <span class="mode-toggler" data-value="view/light-view.css">Light</span>
  • <span class="mode-toggler" data-value="view/dark-view.css">Dark</span> установить значение данных в тему по умолчанию css после нажатия кнопки Я достигну этого с помощью jquery

jQuery код

$('.mode-toggler').click(function() {

    // Change attribute of css default theme by checking for statements with href attribute contains view keyword
    $("link[href*='view']").attr("href", $(this).attr("data-value");

});

Answer 1

Итак, во-первых, вам нужно установить в локальном хранилище выбранную пользователем тему:

$('.mode-toggler').click(function() {

    // Change attribute of css default theme by checking for statements with href attribute contains view keyword
    $("link[href*='view']").attr("href", $(this).attr("data-value"));

    // set localstorage
    localstorage.setItem("selectedTheme",  $(this).attr("data-value"));

});

И когда вы загрузите веб-страницу в следующий раз, вам придется проверять выбранные темы еще до загрузки вашей страницы. Просто включите этот скрипт в свой тег head.

<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = localstorage.getItem("selectedTheme") || "view/light-view.css";
document.head.appendChild(link);
</script>

Но я боюсь, что это может привести к мерцанию, потому что сначала сырой HTML (без CSS) будет окрашен в вашем браузере, а затем вставляется весь CSS, и DOM перерисовывается с помощью CSS. Вы можете решить эту проблему, удалив связанный с темой CSS в отдельном файле (скажем, darktheme.css) и поместив все остальные CSS в постоянный файл css (styles.css). Пока страница загружается, загрузите ее с помощью styles.css и загрузите тег скрипта *theme.css.