首頁猿問如何為當前打開的標簽實現本地存儲？

如何為當前打開的標簽實現本地存儲？

JavaScript

墨色風雨 2022-01-20 18:43:33

我按照此鏈接將數據存儲在我的瀏覽器中以獲取單選按鈕。問題是如果我在另一個選項卡中打開相同的 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

反對回復 2022-01-20

喵喔喔

TA貢獻1735條經驗獲得超5個贊

只需將內容 localstorage 更改為 sessionStorage。以下是此問題的更新代碼和解決方案（如何為當前打開的選項卡實現本地存儲？）。答案是：

// 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

反對回復 2022-01-20

2 回答
0 關注
225 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何為當前打開的標簽實現本地存儲？

如何為當前打開的標簽實現本地存儲？

2 回答

添加回答

如何為當前打開的標簽實現本地存儲？

如何為當前打開的標簽實現本地存儲？