Запоминание выбора цвета через Jquery (localStorage)

Question

Я создал очень простой и базовый c Jquery скрипт, который меняет класс для текстовых полей на моем сайте, чтобы они могли иметь различный цветной фон при нажатии кнопки. Затем я попытался (с помощью Jquery -for-dummies-book) настроить его так, чтобы выбор цвета запоминался локально.

Я должен, однако, быть большим "пустышкой", чем ожидалось, потому что я не смог сделать эту работу. Когда я загружаю скрипт на сервер и тестирую его на сайте, я могу изменить цвет, но если я снова закрою окно и затем go на моем сайте, цвет вернется к значению по умолчанию. Это НЕ запоминается / сохраняется.

Возможно ли, что проблема связана с тем, что мои текстовые поля используют класс "row" для установки цвета фона, и вы не можете изменить класс на другой класс, но должен использовать правильный элемент или идентификатор? Или порядок частей скрипта может быть другим? Любое и всякое понимание ценится в моей учебной поездке.

Внешний сценарий

$(document).ready(function(){
  if (localStorage.getItem("farvevalg")=="farve") { $(".row").addClass("farve");
  }

  if ($(".row").hasClass("farve")) {
    localStorage.setItem("farvevalg", "farve");
  } else {localStorage.removeItem("farvevalg")}

  $('#farvevalg').click(function(){
      $(".row").toggleClass('farve');
    }); }

Мой HTML

/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}

/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}

/*The button that must be clicked to change color*/
#farvevalg {
    margin-top: 6%;
    padding: 5px;
}

Answer 1

Что вы делаете, это то, что в начале вашего приложения проверьте, есть ли сохраненный элемент «farvevalg» со значением «farve». Если это так, то вы добавляете класс 'farve' ко всем элементам с классом 'row'. После этого вы проверяете, есть ли элемент строки с классом «farve», и, если это так, вы помещаете элемент в хранилище, в противном случае вы удаляете его. Как видите, этот фрагмент кода не имеет смысла, поскольку он не будет иметь никакого эффекта. Вместо этого вы должны переместить этот блок if / else внутри обратного вызова click (после $(".row").toggleClass('farve');)

Answer 2

Ваша попытка верна, но добавьте / удалите localStorage, который вы делаете не в том месте. Вы должны сделать это внутри нажатия этой кнопки.

РАБОЧАЯ СКИДКА

Сниппет не будет работать из-за проблемы CORS. Это только для просмотра кода.

$(document).ready(function () {

              if (localStorage.getItem("farvevalg") == "farve") {
                $(".row").addClass("farve");
              }


              $('#farvevalg').click(function () {
                $(".row").toggleClass('farve');
                if ($(".row").hasClass("farve")) {
                  localStorage.setItem("farvevalg", "farve");
                } else {
                  localStorage.removeItem("farvevalg")
                }
              });
            });

/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}

/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}

/*The button that must be clicked to change color*/
#farvevalg {
    margin-top: 6%;
    padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div class="row">
Test
</div>
<button id="farvevalg">
Change
</button>

Answer 3

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

$(document).ready(function(){

    if (localStorage.getItem("farvevalg")=="farve") { 

        $(".row").addClass("farve");
    }


    $('#farvevalg').click(function(){
//only here we add/remove setting
        var wasFarveColor = $(".row").hasClass("farve")

        $(".row").toggleClass('farve');

        if(wasFarveColor)
            localStorage.removeItem("farvevalg")
        else
            localStorage.setItem("farvevalg", "farve")

      }); 
    })