Получаете несколько кнопок, чтобы оставаться активными при обновлении страницы?

Question

Я какое-то время работал над столом для проекта класса, и он работает довольно хорошо (благодаря большому вкладу, который я нашел здесь)

У меня проблемы с получением кнопок, чтобы оставаться активнымикогда страница перезагрузится.Я использую jQuery, и работал с localStorage и sessionStorage совсем без результатов.Любая помощь будет принята с благодарностью!

Вот фрагмент:

  function toggle(event) { //this is what happens when you click on a button
      $(this).toggleClass('active'); //adds an "active" class (color changes)
      sessionStorage.setItem("activeDiv", $(this).index('.btn')); //i need help with this
    }
    $(function() {
        "use strict";
        $(".btn").on("click ", toggle); // you can set the buttons active or not
          var activebtn = sessionStorage.getItem("activeDiv"); 
          if (activebtn) {                                      //I need help with this
            $('.btn').toggleClass('active').eq(activebtn).toggleClass('active');
          }
        });

table,
tr,
td {
  background-color: #a3bfd9;
  border: solid 2px #41403E;
  border-collapse: collapse;
}

.btn {
  vertical-align: top;
  background-color: #ebd3eb;
  border-color: #93e2ff;
  font-size: 10px;
  width: 100px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
}

.btn:hover {
  background-color: #93e2ff;
  opacity: 0.7;
  /*color: #5fc0e3;*/
  border-color: #5fc0e3;
  transition: 0.3s;
}

.btn.active {
  background-color: #899c30;
  color: #fff;
  border-color: #005fbf;
  transition: 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="obsimotable">
  <table>
    <tr>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="5">Some class 5op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="5">Some class 5op</button>
        <br>
        <button class="btn" value="13">Some class 13op</button>
        <br>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <button class="btn" value="5">Some class 5op</button>
        <br>
        <button class="btn" value="5">Some class 5op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="6">Some class 6op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="6">Some class 6op</button>
        <br>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="6">Some class 6op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="6">Some class 6op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="3">Some class 3op</button>
        <br>
      </td>
    </tr>
  </table>

Answer 1

Как я уже говорил в моем предыдущем комментарии, одним из способов будет использование JSON.stringify и JSON.parse, так как вам нужно хранить несколько значений (несколько кнопок), но локальное (и сессионное) хранилище позволяет сохранять только строки.

Код комментируется, поэтому должно быть легко понять, что происходит.

function toggle(event) {

  let btnIndex = $(this).index('.btn');
  let activeButtons = [];

  if (!sessionStorage.getItem("activeButtons")) {

    // Session storage item doesn't exist yet -> Create it
    sessionStorage.setItem("activeButtons", JSON.stringify(activeButtons));
  }

  // Get active buttons from session storage
  activeButtons = JSON.parse(sessionStorage.getItem("activeButtons"));

  if ($(this).hasClass('active')) {

    // Button has active class -> Remove from activeButtons array
    var index = activeButtons.indexOf(btnIndex);
    if (index !== -1) activeButtons.splice(index, 1);

  } else {

    // Button doesn't have active class -> Push to activeButtons array
    activeButtons.push(btnIndex);
  }

  // Toggle active class
  $(this).toggleClass('active');

  // Set items in session storage
  sessionStorage.setItem("activeButtons", JSON.stringify(activeButtons));
}

$(function() {

  //sessionStorage.clear(); // Uncomment this line to clear session storage

  $(".btn").on("click ", toggle);

  // Load active buttons
  let activeButtons = JSON.parse(sessionStorage.getItem("activeButtons"));

  if (activeButtons.length) {

    // Loop through active buttons
    for (var i = 0; i < activeButtons.length; i++) {

      // Add active class for each active button
      $('.btn').eq(activeButtons[i]).addClass('active');
    }
  }
});

Вот рабочая скрипка .

Answer 2

Вот мое решение: https://codepen.io/HerrSerker/pen/vQjYGw?editors=1011

Это в коде, потому что фрагменты SO не позволяют использовать sessionStorage (по понятным причинам).

В любом случае код JSкак это:

jQuery(function($) {
  "use strict";
  var activeButtons = []
  var selector = '.btn';
  var storageKey = "activeButtons";
  var activeClassName = 'active';

  readStorage();
  $(selector).on('click', reactClick);

  function readStorage() {
    var storage = sessionStorage.getItem(storageKey);
    if (storage) {
      activeButtons = storage.split(',');
    }
    $(selector)
      .filter(function(i, e) {
        return activeButtons.indexOf(""+i) !== -1
      })
      .toggleClass(activeClassName)
  }

  function reactClick() {
    $(this).toggleClass(activeClassName);
    var index = $(this).index(selector);
    toggleArrayItem(activeButtons, ""+index);
    sessionStorage.setItem(storageKey, activeButtons)
  }

  function toggleArrayItem(a, v) {
      var i = a.indexOf(v);
      if (i === -1)
          a.push(v);
      else
          a.splice(i,1);
  }  

});