Как использовать LocalStorage для сохранения выбранных цветов фона для кнопок? - PullRequest
Новая
       10

Как использовать LocalStorage для сохранения выбранных цветов фона для кнопок?

0 голосов
/ 22 марта 2020

Проблема в том, что я не знаю, как использовать 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); */
    }
  }
    .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 ]

0 голосов
/ 22 марта 2020

ОП явно спросил о сохранении в localStorage, поэтому ответ Лейры Санчес правильный. Я полагаю, что OP также запрашивает получение данных из localStorage, поэтому я уточню.

Я бы предложил добавить идентификаторы для ваших кнопок 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 голосов
/ 22 марта 2020

Невозможно выполнить тестирование во фрагменте, но код должен быть хорошим.

Вам понадобятся геттер и сеттер. После того, как они у вас есть, вы можете получить, установить или загрузить все настройки. 

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>
0 голосов
/ 22 марта 2020

Вы сохраняете что-то в локальном хранилище с помощью:

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...