在页面刷新时让几个按钮保持活动状态吗？

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

这是我的解决方案：https://codepen.io/HerrSerker/pen/vQjYGw?editors=1011

这在Codepen中，因为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);
  }  

});

Answer 2

正如我在较早的评论中所述，一种方法是使用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');
    }
  }
});

这里是working fiddle。