问题是我不知道如何使用 LocalStorage 为按钮保存选择的背景颜色。我以前从未使用过 LocalStorage，但我对代码的想法是以某种方式使用 myFunction(color)，它利用了 onclick 函数中的颜色值。任何帮助，将不胜感激！$("[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); */ } }<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">×</span> </div> </body>
3 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
无法在代码段中进行测试，但代码应该很好。
您将需要一个 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">×</span>
</div>
</body>
BIG阳
TA贡献1859条经验 获得超6个赞
OP 明确询问有关保存到 localStorage 的问题，因此 Leira Sánchez 的回答是正确的。我相信 OP 也在询问从 localStorage 获取数据，所以我会详细说明。
我建议向您的 HTML 按钮添加 id 以明确保存颜色：
<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;
})
})
三国纷争
TA贡献1804条经验 获得超7个赞
您可以通过以下方式将某些内容保存到本地存储：
localStorage.setItem('whatever you wanna save goes here');
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
添加回答
举报
0/150
提交
取消