我有6个标签。但是，当您从1个选项卡切换到另一个选项卡时，前一个选项卡中的数据将丢失。如何使用会话存储对象来防止这种情况？
我曾经尝试过使用sessionstorage，但是我还是新手，不确定如何正确设置其格式。
我的HTML代码：
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li><a href="GameMainWindow.html" id="onlink">Home</a></li>
<li><a href="SkillTree.html">SkillTree</a></li>
<li><a href="Equipment.html">Equipment</a></li>
<li><a href="Pets.html">Pets</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="Quests.html">Quests</a></li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface.css"
/>
</head>
<title> Basic Clicker</title>
<body>
<style>
div,
a {
text-align: center;
}
</style>
<span id="cookies">0</span>
<br />
<span id="rebirths">0</span>
<br />
<button onclick="cookieClick()">Click Me!</button>
<br />
Cost: 10mp <button id="BigClickBtn"
onclick="Bigclick()">BigClick</button>
<br />
Cost: <span id="cursorCost">10</span> <button
id="cursorCostBtn" onclick="buyCursor()">Buy Cursor</button>
<br />
Cost: <span id="catCost">50</span> <button
onclick="buyCat()" id="catCostBtn">Buy Cat</button>
<br />
Cost: <span id="dogCost">100</span> <button
onclick="buyDog()" id="dogCostBtn">Buy Dog</button>
<br />
Cost: <span id="humanCost">200</span> <button
onclick="buyHuman()" id="humanCostBtn">Buy Human</button>
<br />
Cost: <span id="rebirthCost">10</span> <button
onclick="buyRebirth()" id="rebirthCostBtn">Rebirth</button>
<br />
Hp:<span id="HitPoints">0</span> Mp:<span
id="ManaPoints">0</span>
</body>
第二个标签的HTML代码：
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li><a href="GameMainWindow.html">Home</a></li>
<li><a href="SkillTree.html" id="onlink">SkillTree</a></li>
<li><a href="Equipment.html">Equipment</a></li>
<li><a href="Pets.html">Pets</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="Quests.html">Quests</a></li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<title> Basic Clicker</title>
<body>
<style>
div,
a {
text-align: center;
}
</style>
Skill Tree SP: <span id="SkillPoints">0</span>
<br />
<br />
<button id="SkillPoints" onclick="Hp up()">Hp up</button> <button id="SkillPoints" onclick="Mp up()">Mp up</button>
<br />
<button id="SkillPoints" onclick="Hp up()">Hp regen</button>
<button id="SkillPoints" onclick="Strength up()">Str up</button>
<button id="SkillPoints" onclick="Mp regen()">Mp regen</button>
<br />
<button id="SkillPoints" onclick="()">Passive skill</button> <button id="SkillPoints" onclick="Hp up()">Passive skill</button> <button id="SkillPoints" onclick="Hp up()">Passive skill</button> <button id="SkillPoints" onclick="Hp up()">Passive skill</button>
<br />
<script type="text/javascript" src="main.js"></script>
</body>
</html>
</p>
</div>
首页JavaScript：
`var cookies = 0;
function cookieClick() {
cookies = cookies + Strength;
document.getElementById("cookies").innerHTML = cookies;
checkCursor()
}
///var UP_INTERVAL = 1000;
///setInterval(cookieClick, UP_INTERVAL);
function Bigclick() {
if (ManaPoints >= 10 && rebirths >= 1) {
cookies = cookies + 50
ManaPoints = ManaPoints - 10;
document.getElementById('cookies').innerHTML = cookies;
document.getElementById("ManaPoints").innerHTML = ManaPoints;
}
checkCursor()
}
var cursors = 0;
function buyCursor() {
var cursorCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out
the cost of this cursor
if (cookies >= cursorCost) { //checks that the player can afford the cursor
cursors = cursors + 1; //increases number of cursors
cookies = cookies - cursorCost; //removes the cookies spent
document.getElementById('cursors').innerHTML = cursors; //updates the number of cursors for the user
document.getElementById('cookies').innerHTML = cookies; //updates the number of cookies for the user
}
var nextCost = Math.floor(10 * Math.pow(1.1, cursors)); //works out the cost of the next cursor
document.getElementById('cursorCost').innerHTML = nextCost; //updates the cursor cost for the user
}
var cats = 0;
function buyCat() {
var cursorCost = Math.floor(50 * Math.pow(1.1, cats)); //works out the
cost of this cursor
if (cookies >= cursorCost) { //checks that the player can afford the
cursor
cats = cats + 2; //increases number of cursors
cookies = cookies - cursorCost; //removes the cookies spent
document.getElementById('cats').innerHTML = cats; //updates the
number of cursors for the user
document.getElementById('cookies').innerHTML = cookies; //updates
the number of cookies for the user
}
var nextCost = Math.floor(10 * Math.pow(1.1, cats)); //works out
the
cost of the next cursor
document.getElementById('cursorCost').innerHTML = nextCost;
//updates
the cursor cost for the user
}
var rebirths = 0;
var HitPoints = 0;
var ManaPoints = 0;
var SkillPoints = 0;
var Strength = 1;
function buyRebirth() {
var rebirthCost = Math.floor(10 * Math.pow(1.1, rebirths));
if (cookies >= rebirthCost && rebirths < 1) {
cookies = cookies - rebirthCost
HitPoints = HitPoints + 10;
ManaPoints = ManaPoints + 10;
SkillPoints = SkillPoints + 1;
rebirths = rebirths + 1;
document.getElementById("rebirths").innerHTML = rebirths;
document.getElementById('cookies').innerHTML = cookies;
document.getElementById("HitPoints").innerHTML = HitPoints;
document.getElementById("ManaPoints").innerHTML = ManaPoints;
document.getElementById("rebirthCost").innerHTML = rebirthCost;
document.getElementById("SkillPoints").innerHTML = SkillPoints;
}
if (cookies >= rebirthCost)
if (rebirths >= 1) {
cookies = cookies - rebirthCost
rebirths = rebirths + 1;
SkillPoints = SkillPoints + 1;
document.getElementById('cookies').innerHTML = cookies;
document.getElementById("rebirthCost").innerHTML = rebirthCost;
document.getElementById("rebirths").innerHTML = rebirths;
document.getElementById("SkillPoints").innerHTML = SkillPoints;
}
var nextCost5 = Math.floor(10 * Math.pow(1.1, rebirths));
document.getElementById('rebirthCost').innerHTML = nextCost5;
}
function HitPointsup() {
if (SkillPoints > 0 && rebirths >= 1) {
SkillPoints = SkillPoints - 1;
HitPoints = HitPoints + 10;
}
document.getElementById('SkillPoints').innerHTML = SkillPoints;
document.getElementById("HitPoints").innerHTML = HitPoints;
}
function ManaPointsup() {
if (SkillPoints > 0 && rebirths >= 1) {
SkillPoints = SkillPoints - 1;
ManaPoints = ManaPoints + 10;
}
document.getElementById('SkillPoints').innerHTML = SkillPoints;
document.getElementById("ManaPoints").innerHTML = ManaPoints;
}
function Strengthup() {
if (SkillPoints > 0 && rebirths >= 1) {
SkillPoints = SkillPoints - 1;
Strength = Strength + 0.5;
}
document.getElementById('SkillPoints').innerHTML = SkillPoints;
document.getElementById("ManaPoints").innerHTML = ManaPoints;
}
function checkCursor() {
if (cookies <= 9) {
document.getElementById("cursorCostBtn").disabled = true;
} else {
document.getElementById("cursorCostBtn").disabled = false;
}
if (cookies <= 49) {
document.getElementById("catCostBtn").disabled = true;
} else {
document.getElementById("catCostBtn").disabled = false;
}
if (cookies <= 99) {
document.getElementById("dogCostBtn").disabled = true;
} else {
document.getElementById("dogCostBtn").disabled = false;
}
if (cookies <= 199) {
document.getElementById("humanCostBtn").disabled = true;
} else {
document.getElementById("humanCostBtn").disabled = false;
}
if (cookies <= 9) {
document.getElementById("rebirthCostBtn").disabled = true;
} else {
document.getElementById("rebirthCostBtn").disabled = false;
}
if (rebirths < 1) {
document.getElementById("BigClickBtn").disabled = true;
} else {
document.getElementById("BigClickBtn").disabled = false;
}
}
这里就像我的标签的屏幕截图（不确定如何起诉图像上传器） http://prntscr.com/nwho6t http://prntscr.com/nwho8x http://prntscr.com/nwhoax我的10个按钮单击消失了
我希望当我现在更改选项卡以将数据保存在会话存储中时，然后稍后我想将其更改为本地存储（当我完成时）。但是实际的输出更改选项卡会重置进度。
答案 0 :(得分：1)
您的问题和随附的代码存在三个问题。
您发布的代码存在问题：
HTML格式不正确。您有一个<head>和<body>标签，即嵌套在外部<body>标签内部的整个HTML文档。首先解决该问题。
您发布的JavaScript根本没有在任何地方使用sessionStorage。
您遇到的问题
可解决您问题的一般建议和解决方案：
即使在同一浏览器进程中，sessionStorage也不会跨选项卡保留数据。因此，请勿使用它来存储与会话相关的数据。而是使用普通的旧Cookie。
请观看此视频：Warning: Don't count on the HTML5 window.sessionStorage for storing session related data