localStorage.setItem не срабатывает для url

294

07 октября 2017, 22:21

Друзья, создаю возможность для пользователя установить фон с сохранением для следующих сессий. Почему-то url не сохраняется (Опция "Морская волна")

else if ($(this).val() == 2)    
{      
  $('body').css('background', 'url(http://www.clipart.net.ua/images/clip9100.jpg)');
  localStorage.setItem('background', 'http://www.clipart.net.ua/images/clip9100.jpg');    
}

Заранее спасибо

https://jsfiddle.net/Nata_Hamster/tx4e57xa/4/

Полный код:

$(document).ready(function() {
  var getColour;
  if (localStorage.getItem('background') !== null) {
    getColour = localStorage.background;
    $('body').css('background-color', getColour);
  }
  $("#seltag").change(function() {
    if ($(this).val() == 1) {
      $('body').css('background', 'red');
      localStorage.setItem('background', 'red');
    } else if ($(this).val() == 2) {
      $('body').css('background', 'url(http://www.clipart.net.ua/images/clip9100.jpg)');
      localStorage.setItem('background', 'http://www.clipart.net.ua/images/clip9100.jpg');
    } else {
      $('body').css('background-color', 'blue');
      localStorage.setItem('background', 'blue');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="seltag" onchange="">
<option VALUE="0">Выберете подходящий фон</option>
        <option value="1">Красный</option>
        <option VALUE="2">Морская волна</option>
        <option VALUE="3">Синий</option>
        <option>4</option>
</select>

Answer 1

Есть несколько вопросов:

При загрузке присваивается background-color, а не image.
Сохраняется в localStorage только url, но для установки в коде ты используешь следующую строку .css('background', 'url(http://www.clipart.net.ua/images/clip9100.jpg)')

Если это все исправить, то все заработает. В итоге код может выглядеть так:

$(document).ready(function() {
  var getColour;
  if (localStorage.getItem('background') !== null) {
    getColour = localStorage.background;
    $('body').css('background', getColour);
  }
  $("#seltag").change(function() {
    if ($(this).val() == 1) {
      $('body').css('background', 'red');
      localStorage.setItem('background', 'red');
    } else if ($(this).val() == 2) {
      $('body').css('background', 'url(http://www.clipart.net.ua/images/clip9100.jpg)');
      localStorage.setItem('background', 'url(http://www.clipart.net.ua/images/clip9100.jpg)');
    } else {
      $('body').css('background-color', 'blue');
      localStorage.setItem('background', 'blue');
    }
  });
});

Пример на JSFiddle