Javascript 使用Vanilla JS动态更新页面内容

大家好

所以我正在做一个项目，它本质上是一个老式的纸笔rpg，运行在聊天室。但是我遇到了麻烦，因为每个角色的技能和统计数据都是基于他们的属性的，当初始值建立时，我需要找到一种方法，使统计数据和技能在他们调整这些属性时动态更新。我知道这对Angular来说很容易，但我认为运动部件越少，故障的可能性就越小

本质上，目标是设置JS，以便在更新属性时，技能和统计数据也会更新。以下是到目前为止属性的代码：

 <td colspan="2">MEMORY</td>
    <td colspan="2">     
    <button onclick="decMem();" class="modButton" type="button">-</button>   
    <input type="text" id="MEM" class="trait" readonly /><script>document.getElementById("MEM").setAttribute('value', Mem);</script>
    <button onclick="incMem();" class="modButton" type="button">+</button>
  </td>

function incMem(){
if (traitPts > 0 && Mem < 20){
traitMod += 1;
Mem += 1;
traitPts -= 1;
document.getElementById("MEM").setAttribute('value', Mem);
document.getElementById("traitPts").setAttribute('value', traitPts);
} else { alert("CAN'T INCREASE FURTHER");}}

function decMem(){
if (traitMod > 0 && Mem > mem){
traitMod -= 1;
Mem -= 1;
traitPts += 1;
document.getElementById("MEM").setAttribute('value', Mem);
document.getElementById("traitPts").setAttribute('value', traitPts);
} else { alert("CAN'T REDUCE FURTHER");}}

并发送到如下页面：

<td>STEALTH</td>
  <td><input type="text" id="stealth" readonly/><script>document.getElementById("stealth").setAttribute('value', stealth);</script></td>
  <td>CLIMBING</td>
  <td><input type="text" id="climb" readonly /><script>document.getElementById("climb").setAttribute('value', climb);</script></td>

隐身
document.getElementById（“隐藏”）.setAttribute（“值”，隐藏）；
攀登
document.getElementById（“爬升”）.setAttribute（“值”，爬升）；

---

问题是，如果我重新加载一个页面，所有属性都会随着设置而改变，以模拟掷骰子，所以我在这里不知所措。但是这是一个PHP页面，所以也许有一种方法可以临时存储数据？请帮忙

在使用Javascript和在刷新过程中维护变量方面，您有两个选择。如果希望在浏览会话结束时清除信息，可以使用

会话存储

，但如果希望应用程序无限期地使用该信息，可以使用

本地存储

。有关文档，请参阅

基本上，在浏览器中“保存”数据的方法是：

localStorage.setItem('myCat', 'Tom');
// or
sessionStorage.setItem('myCat', 'Tom');

然后，要在以后获取数据，您将使用

var cat = localStorage.getItem('myCat');

---

在本例中，哪个将返回值

'Tom'

，您了解浏览器中运行的代码（javascript）和服务器上运行的代码（php）之间的区别吗？因为您可以使用php将这些统计数据存储在服务器中，或者可以将它们存储在浏览器上的cookie中。使用“确定”可以设置一个页面，让用户修改其属性，然后设置另一个页面，以给出其技能/统计数据的最终输出。有没有办法在同一个页面上完成这一切？我真的更感兴趣的是在一个页面上删除整个角色创建部分OK，这样我可以设置一个页面，让用户修改他们的属性，然后再设置另一个页面，给出他们技能/统计的最终输出。有没有办法在同一个页面上完成这些工作？我真的更感兴趣的是在一个页面上完成整个角色的创建。如果你能在两个页面上分别完成这些工作，我想在一个页面上完成会更容易。你具体在问什么？我希望所有依赖于属性的统计数据和技能在incMem（）一出现就更新；或decMem（）；函数被调用

var cat = localStorage.getItem('myCat');