Как использовать сохраненные значения цвета в локальном хранилище, чтобы применить и сохранить стиль? - PullRequest
Новая
       16

Как использовать сохраненные значения цвета в локальном хранилище, чтобы применить и сохранить стиль?

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

Моя проблема в том, что я не знаю, почему цвета фона, выбранные для кнопок (красный, зеленый или синий), не сохраняются в локальном хранилище. Я хочу сохранить цвет фона локально в браузере, чтобы цвет фона оставался прежним, даже если веб-сайт обновлялся.

Значение цвета теперь просто сохраняется в локальном хранилище как строка.

Я пробовал много разных способов справиться с этим, но не нашел подходящего решения. Если вы видите что-то не так с кодом или структурой, было бы очень полезно, если бы вы могли поделиться некоторым кодом или советами!

Запустите код из jsfiddle: https://jsfiddle.net/b04cmphv/3/

или посмотрите код в фрагменте кода: 

// 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;
    }
<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" 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>
...