我正在制作一个带有选项卡的游戏，并且当我更改选项卡时，选项卡之间的进度会重置 http://prntscr.com/ns2jvg http://prntscr.com/ns2k31 http://prntscr.com/ns2k74我知道最终我会创建一个名为“选项”的最后一个选项卡，您可以使用它来重置。但我希望开发能够调试并能够在不重置的情况下切换选项卡
我不知道这是如何完成的，因为我对 html 还不熟悉
这是我的 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>
这是 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>
我希望选项卡能够切换，并且玩家不会丢失任何数据/不会重置。现在，当您单击不同的选项卡时，一切都会重置。
最佳答案
您可以使用localStorage 。
在第一页上，您可以使用以下方式将项目添加到 localStorage 中:
localStorage.setItem('pet', 'Cat'); // name, value
在第二页上，您可以使用以下方式检索值:
var pet = localStorage.getItem('pet');
您也可以稍后覆盖该值，或使用以下方法将其删除:
localStorage.removeItem('pet'); // remove an individual item
localStorage.clear(); // remove all items
请注意，localStorage 在浏览器 session 中持续存在。如果您想将存储限制为单个 session ，则应该使用 sessionStorage 。
关于javascript - 当我切换标签时如何修复进度重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56266164/