如何使用 LocalStorage 保存为按钮选择的背景颜色？
问题是我不知道如何使用 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回答
-
茅侃侃
无法在代码段中进行测试，但代码应该很好。您将需要一个 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阳
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; }) }) -
三国纷争
您可以通过以下方式将某些内容保存到本地存储：localStorage.setItem('whatever you wanna save goes here');https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
随时随地看视频慕课网APP
相关分类
JavaScript