Сохранить текущую таблицу стилей в локальном хранилище - PullRequest
Новая
       40

Сохранить текущую таблицу стилей в локальном хранилище

0 голосов
/ 22 октября 2018

Я знаю, что этот вопрос был задан, но ни один из постов не помог мне пройти через него.

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

Переключение между таблицами стилей работает отлично.

Вот мой код: 

    window.onload = function() {
        var currentStylesheet = localStorage.getItem("stylesheet");
        document.getElementById("stylesheet").value = currentStylesheet;
        document.getElementById("stylesheet").setAttribute("href", currentStylesheet);
        }

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

1 Ответ

0 голосов
/ 22 октября 2018

Вы просто забыли о Storage.setItem () .Вы заявили, что хотите «сохранить» самую последнюю использованную таблицу стилей.

Я думаю, что вы путаете идею состояния здесь.В своем примере кода вы читаете значение a из localStorage, но не пытаетесь установить localStorage в любой точке.

Давайте рассмотрим минимальный пример.Я подготовил живую демонстрацию ниже:

LIVE DEMO

Представьте, что у вас есть эти файлы:

index.html 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link id="active-stylesheet" href="" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="switch-buttons">
        <button class="switch-buttons__light button" data-stylesheet="light.css">Go Light</button>
        <button class="switch-buttons__dark button" data-stylesheet="dark.css">Go Dark</button>
    </div>
    <h1>Light and Dark Stylesheets with Web Storage API</h1>
    <h2> See <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage">MDN Storage - Web Storage API</a>.</h2>
    <p>
      Click a button above. The style you select will be 'remembered' when you refresh this page. To reset this demo, click the 'Clear Storage' button.</p>
    <p>
        Faucibus interdum posuere lorem ipsum dolor sit amet, consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi? In metus vulputate eu scelerisque felis imperdiet proin fermentum leo.</p>
    <p>
        Etiam sit amet nisl purus, in mollis nunc sed id semper risus in! Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus, dictum at tempor commodo, ullamcorper?</p>
    <button id="clear-storage">Clear Storage</button>
    <script src="script.js"></script>
</body>

</html>

light.css 

body {
  background-color: #fff0bc;
}

h1, h2, p {
  color: #363636;
}

dark.css 

body {
  background-color: #363636;
}

h1, h2, p {
  color: #fff0bc;
}

script.js 

var buttons = document.getElementsByClassName("button");
var activeSheet = document.getElementById("active-stylesheet");
var clearStorageButton = document.getElementById("clear-storage");

// Test to see if localStorage already has a value stored
if (localStorage.getItem("lastActiveSheet")) {
     activeSheet.setAttribute("href", localStorage.getItem("lastActiveSheet"));
}

// Assign the event lister to each button
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", switchStyle);  
}

// Create a button to clear localStorage
clearStorageButton.addEventListener("click", clearStorage);

// Set the #active-stylesheet to be the light or dark stylesheet
function switchStyle() {
   var selectedSheet = this.getAttribute("data-stylesheet");
   activeSheet.setAttribute("href", selectedSheet);
   localStorage.setItem("lastActiveSheet", selectedSheet);
}

// Wrapper function to localStorage.clear
function clearStorage() {
  localStorage.clear();
}

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

Как заметил @Hynek, использовать window.onLoad не очень хорошая идея.Итак, в этом примере я прикрепил прослушиватели событий ко всем используемым кнопкам.

В этом примере на странице есть два варианта на выбор: светлая и темная тема для контраста.Если пользователь выбирает тему, она будет запомнена при следующем обновлении страницы.

Ключом здесь является состояние .Вы хотите, чтобы у вашего приложения была «память».Таким образом, вам нужно добавить функциональность в запись , чтение и очистка памяти.Я предлагаю прочитать больше через MDN - Хранилище - Веб-API , чтобы увидеть, как вы можете это реализовать.На MDN примеров еще больше!

...