如何使用本地存储中存储的颜色值？

Question

我的问题是我不知道为什么为按钮选择的背景颜色（红色、绿色或蓝色）没有保存在本地存储中。我想要的是将背景颜色保存在浏览器本地，这样即使网站刷新，背景颜色也将保持不变。

颜色的值现在只是像字符串一样保存在本地存储中。

我尝试了很多不同的方法来处理这个问题，但还没有找到一个可行的解决方案。如果您发现代码或结构有任何问题，如果您能分享一些代码或提示，我们将不胜感激！

运行来自codepen的代码：https://codepen.io/krantza/pen/KKpJmZm

// On click on a button, a popover menu will show up
$("[data-toggle=popover]").popover({
  html: true,
  sanitize: false,
  trigger: 'focus',
  content: function() {
    return $('#popover-content').html();
  }
});
// Creates data items inside local storage to save the name of the color that is picked
var saveColorPref = (i, c) => {
  localStorage.setItem("color-" + i, c);
  return c;
}
// Retrieves data items from local storage
var getColorPref = (i) => {
  return localStorage.getItem("color-" + i) || "";
}
// Load all the preferences
var loadColorPrefs = () => {
  $(".myBtn").each(() => {
    var i = $(this).index();
    $(this).css("background", getColorPref(i));
  });
}
loadColorPrefs();
// Set the color on click
var targetBtn;

function setColor(c) {
  var i = $(targetBtn).index();
  console.log(i, c);
  $(targetBtn).css("background", saveColorPref(i, c));
}
$('.myBtn').each((i, item) => {
  $(item).click((e) => {
    targetBtn = e.target;
  });
});
// Get the items from localStorage and apply the style
document.querySelectorAll('.myBtn').forEach((item) => {
  const id = $(item).attr("id")
  $(item).css("background-color", localStorage.getItem(id));

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

.popover-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 200px;
  height: 60px;
}
.close {
  float: right;
  position: absolute;
  top: 0px;
  left: 183px;
}
.demo1 {
  background-color: red;
}
.demo2 {
  background-color: green;
}
.demo3 {
  background-color: blue;
}
.hide {
  display: none;
}

<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>


<button class="myBtn" 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>

或查看代码片段中的代码：

Answer 1

代码中有 2 个不同的部分尝试应用保存的颜色。

这个不能用，因为你的 myBtn 按钮中没有 id 属性：

// Get the items from localStorage and apply the style
document.querySelectorAll('.myBtn').forEach((item) => {
  const id = $(item).attr("id")
  $(item).css("background-color", localStorage.getItem(id));

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

还有这个：

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

在 codepen 上，this 指的是 window 对象。使用 jQuery each

的内置 element

Function( Integer index, Element element )

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

如何使用本地存储中存储的颜色值？

How do I use stored color values in local storage?

html

javascript

arrays

popover

local-storage