堆栈内存溢出
  简体   繁体   English

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

[英]How do I use LocalStorage to save picked background colors for buttons?

 原文  2020-03-22 00:30:11  3   3    javascript/ jquery/ html/ css/ local-storage

问题描述

The problem is that I don't know how to to use LocalStorage to save picked background-colors for the buttons.问题是我不知道如何使用 LocalStorage 为按钮保存选择的背景颜色。 I have never used LocalStorage before but my idea for the code is to somehow use myFunction(color), which make use of the color value from the onclick function.我以前从未使用过 LocalStorage，但我对代码的想法是以某种方式使用 myFunction(color)，它利用来自 onclick 函数的颜色值。 Any help would be appreciated!任何帮助，将不胜感激！ 

 $("[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>

3 个解决方案

解决方案1
 0  2020-03-22 00:43:49

You save something to local storage by:您可以通过以下方式将内容保存到本地存储：

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

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

解决方案2
 0  2020-03-22 01:34:50

OP asked explicitly about saving to localStorage, so Leira Sánchez's answer is correct. OP 明确询问了保存到 localStorage 的问题，因此 Leira Sánchez 的回答是正确的。 I believe OP is asking about getting data from localStorage as well, so I will elaborate.我相信 OP 也在询问从 localStorage 获取数据，所以我会详细说明。

I would suggest adding ids to your HTML buttons to save the colors explicitly:我建议将 id 添加到您的 HTML 按钮以明确保存颜色：

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

myFunction() should now be able to obtain targetBtn.id , and you would save to localStorage something like this: myFunction()现在应该能够获得targetBtn.id ，你可以像这样保存到 localStorage ：

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

In your document.getQuerySelector you could then get the items from localStorage and apply the style在您的 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;
    })
  })

解决方案3
 0 已采纳  2020-03-22 02:07:52

Unable to test in the Snippet but the code should be good.无法在 Snippet 中进行测试，但代码应该不错。

You will need a Getter and a Setter.您将需要一个 Getter 和一个 Setter。 Once you have them, you can get, set or load all the preferences.拥有它们后，您可以获取、设置或加载所有首选项。 

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将背景色保存到localStorage？ - How do I save background color to localStorage? 如何使用 LocalStorage 值来保存按钮的特定背景颜色？ - How do I use LocalStorage values to save a specific background-color of a button? 如何将 LocalStorage 添加到按钮以更改 colors - How to add LocalStorage to buttons to change colors 如何动态保存到localStorage？ - How do I save to localStorage dynamically? 如何在本地存储中保存 CSS class？ - How do I save a CSS class in localstorage? 如何使用表格中的单选按钮更改背景颜色。 每个单选按钮4种颜色（白色，红色，黄色，绿色） - How do i change background color using radio buttons in tables. 4 colors(white, red, yellow, green) to each radio buttons 如何在 React 中的按钮上使用 SVG 作为背景图像 - How do I use SVGs for background images on buttons in React 如何在 redux 中使用 localstorage？ - How do I use localstorage with redux? 我如何将 localStorage 用于活动链接 - How do i use localStorage for an active link 如何将单选按钮和复选框保存到本地存储 - How to save Radio buttons and checkbox to localstorage
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM