我按照此链接将数据存储在我的浏览器中以获取单选按钮。问题是如果我在另一个选项卡中打开相同的 url，则单选按钮会根据上一个选项卡选择。功能是 - 提交按钮重定向到另一个页面。所以，我需要的是本地存储该特定当前打开的选项卡和特定链接。我正在使用的代码<!doctype html><html><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /><title>Save state of checkbox on refresh using JavaScript</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><link href="css/custom.css" rel="stylesheet" /><style type="text/css"></style></head><body><ul class="list-group"> <li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox" value="asdf"> Must I save my state?</li> <li class="list-group-item"><input type="checkbox" class="save-cb-state" name="anothercheckbox" value="1"> Try and save this</li> <li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox2" value="qwer"> This can be saved as well.</li> </ul> <script>// Avoid scoping issues by encapsulating code inside anonymous function(function() { // variable to store our current state var cbstate; // bind to the onload event window.addEventListener('load', function() { // Get the current state from localstorage // State is stored as a JSON string cbstate = JSON.parse(localStorage['CBState'] || '{}'); // Loop through state array and restore checked // state for matching elements for(var i in cbstate) { var el = document.querySelector('input[name="' + i + '"]'); if (el) el.checked = true; } // Get all checkboxes that you want to monitor state for var cb = document.getElementsByClassName('save-cb-state');
2 回答
MMTTMM
TA贡献1869条经验 获得超4个赞
您应该能够使用 sessionStorage 而不是 localStorage 来管理它。有关此处差异的更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
喵喔喔
TA贡献1735条经验 获得超5个赞
只需将内容 localstorage 更改为 sessionStorage。以下是此问题的更新代码和解决方案（如何为当前打开的选项卡实现本地存储？）。答案是：
<script>
// Avoid scoping issues by encapsulating code inside anonymous function
(function() {
// variable to store our current state
var cbstate;
// bind to the onload event
window.addEventListener('load', function() {
// Get the current state from localstorage
// State is stored as a JSON string
cbstate = JSON.parse(sessionStorage['CBState'] || '{}');
// Loop through state array and restore checked
// state for matching elements
for(var i in cbstate) {
var el = document.querySelector('input[name="' + i + '"]');
if (el) el.checked = true;
}
// Get all checkboxes that you want to monitor state for
var cb = document.getElementsByClassName('save-cb-state');
// Loop through results and ...
for(var i = 0; i < cb.length; i++) {
//bind click event handler
cb[i].addEventListener('click', function(evt) {
// If checkboxe is checked then save to state
if (this.checked) {
cbstate[this.name] = true;
}
// Else remove from state
else if (cbstate[this.name]) {
delete cbstate[this.name];
}
// Persist state
sessionStorage.CBState = JSON.stringify(cbstate);
});
}
});
})();
</script>
特别感谢@Jacob Nelson
添加回答
举报
0/150
提交
取消