Question

美好的一天

所以我正在开展一个基本上是旧式学校笔的项目。从聊天室跑出来的纸质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");}}

然后每个统计数据或技能都由变量决定：

//COMBAT STATS
var seq =   Math.floor((Per + Spd) / 2);
var act =   Math.floor(Spd / 2);
var block = Math.floor((Dex + Spd) / 2);
var dodge = Math.floor((Dex + Spd) / 4);

//UNIVERSAL SKILLS
var stealth =   (Per * 3) + Dex;
var climb =     (Dex * 3) + Str;
var negot =     Cha * 4;
var navig =     (Log * 2) + Per + Mem;

并发送到这样的页面：

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

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

Answer 1

你有几个选项可以使用Javascript并在刷新时维护变量。如果您希望在浏览会话结束时清除信息，可以使用sessionStorage，但如果您希望无限期地使用该应用，则可以使用localStorage。有关文档，请参阅MDN。

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

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

然后，为了稍后获取数据，您将使用

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

在这种情况下，返回值'Tom'

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

1 个答案: