Создать локальное хранилище для моего цвета фона - PullRequest
Новая
       10

Создать локальное хранилище для моего цвета фона

1 голос
/ 30 марта 2019

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

      var link = document.getElementById("bglink");
      var output = document.getElementById("output");

      link.addEventListener("click", getRandom);

      function getRandom(){

        var newColor = '#'+Math.floor(Math.random()*16777215).toString(16);


        var rgbColor = newColor.replace('#','');
        var r = parseInt(rgbColor.substring(0,2), 16);
        var g = parseInt(rgbColor.substring(2,4), 16);
        var b = parseInt(rgbColor.substring(4,6), 16);
        var result = 'rgba(' + r + ',' + g + ',' + b + ')';

        document.body.style.backgroundColor = newColor;
        output.textContent = newColor + " - " + result;


      }

              $("#bglink").click(function () {
    var bgcolor = document.body.style.backgroundColor; 
    localStorage.setItem("bgcolor", document.body.style.backgroundColor);
    alert('Background colour ' + bgcolor + ' saved in localStorage');
});

При перезагрузке страница должна иметь последний цветэто было установлено при нажатии кнопки.

Ответы [ 3 ]

0 голосов
/ 30 марта 2019

Просто добавьте это вверху вашего файла: 

document.body.style.backgroundColor = localStorage.getItem("bgcolor") || "#FFF"; 
//White is default color if no saved color
0 голосов
/ 01 июля 2019

Вот очень простой способ сохранить цвет фона в локальном хранилище.

HTML 

<input type="color" id="colorID" oninput="changeColor()">

JavaScript 

function changeColor() { 
  var userColor = document.getElementById('colorID').value;
  localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor);
}

if(localStorage.storedValue) {
  document.getElementById('colorID').value = localStorage.storedValue;
  document.body.style.backgroundColor = localStorage.storedValue;
}

CodePen Demo https://codepen.io/joshstovall/pen/PrJveQ
0 голосов
/ 30 марта 2019

Вам просто нужно добавить это, чтобы проверить, установлено ли bgColor, когда документ готов, и установить цвет фона.

Это должно быть все, что вам нужно: 

$(function() {
  let bgColor = localStorage.getItem('bgcolor');
  if (bgColor) {
    document.body.style.backgroundColor = bgColor;
  }
});

Надеюсь, это поможет,

...