刷新页面时，是否有几个按钮保持活动状态

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);
}  
});