Как использовать значения LocalStorage для сохранения определенного c цвета фона кнопки? - PullRequest
Новая
       57

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

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

То, что я пытаюсь сделать, это использовать значения, которые я успешно сохранил в LocalStorage. В зависимости от того, какой цвет выбран, значение этого цвета будет сохранено в LocalStorage (красный, зеленый или синий). У меня вопрос, как теперь я могу использовать эти значения, чтобы сохранить цвет фона этих отдельных кнопок для следующего использования? Буду признателен за любую помощь!

Ссылка для запуска кода: https://jsfiddle.net/Lzj3g86f/7/

// Creates a Popover
$("[data-toggle=popover]").popover({
    html: true,
    sanitize: false,
    trigger: 'focus',
    content: function(){
      return $('#popover-content').html();
    }
  });
// Target the Button That is Clicked
var targetBtn;
$('.myBtn').each((i, item) =>{
  $(item).click((e) =>{
    targetBtn = e.target;
  });
});
// Set the Color of the Buttons
function setColor(c){
  var i = $(targetBtn).index();
  $(targetBtn).css("background", saveColorPref(i, c));
}
// Creates Data items inside LocalStorage
var saveColorPref = (i, c) =>{
  localStorage.setItem("color-" + i, c);
  return c;
}
// Retrieves Data items From LocalStorage
var getColorPref = (i) =>{
  return localStorage.getItem("color-" + i) || "";
}
/*
  Now i want to make use of the Stored Values so that the picked colors
  for the buttons will be saved for next time. I understand how to store text in the LocalStorage,
  but how can I now use these values to save the background-color of these individual buttons?
*/
    .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,.demo2,.demo3{
      border: none;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    .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>
  <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>
</body>

1 Ответ

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

Если вы хотите сохранить цвет фона с элементом, вам нужно будет сохранить элемент как объект, а не просто имя.

Я рекомендую добавить logi c, например, так: Ваш метод добавления: 

function add() {
    var task = document.getElementById('task').value;
    var todos = get_todos();
    var newTask = {
                name:task, 
                id: "item" + todos.length, 
                priority: {
                            isPriority:false, 
                            color:""
                          }
             };

    todos.push(newTask);
    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}

Тогда, когда вы покажете (), ваш l oop будет выглядеть так: 

  for (var i = 0; i < todos.length; i++) {
      var todo = todos[i];
      html += "<p id='item" + i + "' isPriority='" + 
      todo.priority.isPriority + "'>" + todo["name"] + '<p>' + 
      "<button class='remove'>Delete</button>" + " " + 
      "<button class='priority' value='item" + i + "'>Priority</button>";
  };

Затем, когда вы установите приоритет для объекта вы просто устанавливаете 

todos[i].priority.isPriority = true;

и 

todos[i].priority.color = "red";

Если вы хотите определить свой цвет на основе свойства, вы можете просто установить свойство в html как isPriority = true и затем в css сделайте это: 

[isPriority="true"] {
    background-color: red;
}
...