我如何使用LocalStorage为按钮保存选择的背景颜色?

问题描述 投票:0回答:3

问题是,我不知道如何使用LocalStorage为按钮保存选择的背景颜色。我以前从未使用过LocalStorage,但是代码的想法是以某种方式使用myFunction(color),该函数利用了onclick函数中的color值。任何帮助,将不胜感激!

$("[data-toggle=popover]").popover
({
    html: true,
    sanitize: false,
    trigger: 'focus',
    content: function()
    {
      return $('#popover-content').html();
    }
  });
  let targetBtn;
  document.querySelectorAll('.myBtn').forEach((item) =>
  {
    item.addEventListener('click', (e) =>
    {
      targetBtn = e.target;
    })
  })
  function myFunction(color)
  {
    if (targetBtn)
    {
      targetBtn.style.background = color;
      /* Here I somehow want to use localStorage
         to save the picked colors for the buttons 
         localStorage.setItem('targetBtn', color); */
    }
  }
    .popover-content
    {
      display: flex;
      justify-content: space-around;
      align-items:center;
      background: #efefef;
      width: 230px;
      height: 80px;
    }
    .close
    {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      position: absolute;
      top:0px;
      left:210px;
    }
    .close:hover,
    .close:focus
    {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transition: 0.5s;
    }
    .myBtn
    {
      background-color: #DCDCDC;
      border: 0.5px solid #808080;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 6%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .demo1
    {
      background-color: red;
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .demo2
    {
      background-color: green;
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .demo3
    {
      background-color: blue;
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .hide
    {
      display: none;
    }
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="myBtn myBtnCorners1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>
      <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">2</button>
  <div id="popover-content" class="hide">
    <button class="demo1" onclick="myFunction('red')">Red</button>
    <button class="demo2" onclick="myFunction('green')">Green</button>
    <button class="demo3" onclick="myFunction('blue')">Blue</button>
    <span class="close">&times;</span>
  </div>
 </body>
javascript jquery html css local-storage
3个回答
0
投票

您通过以下方式将内容保存到本地存储中:

localStorage.setItem('whatever you wanna save goes here');

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage


0
投票

OP明确询问是否要保存到localStorage,因此LeiraSánchez的回答是正确的。我相信OP也在询问是否要从localStorage获取数据,因此我将详细说明。

我建议将id添加到您的HTML按钮中以显式保存颜色:

<button id="myBtn1" class="myBtn myBtnCorners1" ...>1</button>
<button id="myBtn2" class="myBtn"...>2</button>

[myFunction()现在应该可以获取targetBtn.id,并且您将这样保存到localStorage:

function myFunction(color) {
  if (targetBtn) {
    targetBtn.style.background = color;
    localStorage.setItem(targetBtn.id, color);
  }
}

然后在document.getQuerySelector中,您可以从localStorage获取项目并应用样式

  document.querySelectorAll('.myBtn').forEach((item) => {
    const id = $(item).attr("id")
    $(item).css("background-color", localStorage.getItem(id));

    item.addEventListener('click', (e) => {
      targetBtn = e.target;
    })
  })

0
投票

无法在代码段中进行测试,但是代码应该不错。

您将需要一个Getter和Setter。拥有它们后,您可以获取,设置或加载所有首选项。

var getColorPref = (i) => {
  return localStorage.getItem("color-" + i) || "";
}

var saveColorPref = (i, c) => {
  localStorage.setItem("color-" + i, c);
  return c;
}

var loadColorPrefs = () => {
  $(".myBtn").each(() => {
    var i = $(this).index();
    $(this).css("background", getColorPref(i));
  });
}

loadColorPrefs();

var targetBtn;

function setColor(c) {
  var i = $(targetBtn).index();
  console.log(i, c);
  $(targetBtn).css("background", saveColorPref(i, c));
}

$("[data-toggle=popover]").popover({
  html: true,
  sanitize: false,
  trigger: 'focus',
  content: function() {
    return $('#popover-content').html();
  }
});

$('.myBtn').each((i, item) => {
  $(item).click((e) => {
    targetBtn = e.target;
  });
});
.popover-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #efefef;
  width: 230px;
  height: 80px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: 210px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  transition: 0.5s;
}

.myBtn {
  background-color: #DCDCDC;
  border: 0.5px solid #808080;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 6%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.demo1 {
  background-color: red;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.demo2 {
  background-color: green;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.demo3 {
  background-color: blue;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.hide {
  display: none;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <button class="myBtn myBtnCorners1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>
  <button class="myBtn" data-toggle="popover" data-placement="bottom" data-html="true">2</button>
  <div id="popover-content" class="hide">
    <button class="demo1" onClick="setColor('red')">Red</button>
    <button class="demo2" onClick="setColor('green')">Green</button>
    <button class="demo3" onClick="setColor('blue')">Blue</button>
    <span class="close">&times;</span>
  </div>
</body>
热门问题
推荐问题
最新问题