Question

我有一个按钮，每次单击它都会随机生成背景色。我想将其设置为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');
});

重新加载时，页面应设置为单击按钮时设置的最后一种颜色。

Answer 1

您只需要添加此内容即可检查文档准备就绪时是否设置了bgColor并设置背景色。

这应该是您所需要的：

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

希望有帮助，

Answer 2

只需将其添加到文件顶部：

document.body.style.backgroundColor = localStorage.getItem("bgcolor") || "#FFF"; 
//White is default color if no saved color

Answer 3

这是一种将背景色保存到本地存储中的非常简单的方法。

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演示 https://codepen.io/joshstovall/pen/PrJveQ

为我的背景色创建本地存储

3 个答案: