1

我正在尝试更新我的探路者字符生成器，​​以便能够使用 HTML5 的网络存储来保存字符。我有一个用于生成字符的 JavaScript 文件。

但是，我遇到了一些问题。当点击我的“更新角色”按钮时，我怎样才能做到只有已经更新的内容发生了变化？其次，展示结果的最佳方式是什么？

这是我当前的代码：

function SaveCharacter() {
    makeCharacter();
    if (typeof(Storage) !== "undefined") {
        if (localStorage.used) {
            alert("used was true.");
            localStorage.name = name;
        }
        else {
            localStorage.used = true;
            localStorage.name = name;
            localStorage.skill_points = num_skill_points;
            localStorage.spells = num_spells;
            localStorage.feats = num_feats;
            localStorage.hitdie = hit_die;
            localStorage.wealth = wealth;
            localStorage.Class = Class;
         // localStorage.Scores = new Array();
         // for (var i = 0; i < n; i++) {
         //         localStorage.Scores[i] = ability_scores[i];
         //         }
            }
            document.getElementById("result").innerHTML="Character Name: " + localStorage.name;
        }
        else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}

function DeleteCharacter() {
        localStorage.clear();
}

使用它时，无论我是否删除了角色，它都会更改名称。此外，document.getElementById("result").innerHTML="Character Name: " + localStorage.name;不允许我一次更新多个字段。有什么更好的方法来做到这一点？

[编辑] -这是生成器的链接。

4

1 回答 1

2

首先对您所做的事情有一些想法：

  1. 我建议您使用 Modernizr 库，而不是typeof(Storage) !== "undefined"知道是否支持 localStorage。它将更加健壮。
  2. 与其处理一堆变量，不如创建一个 Character 对象之类的东西，该对象将保存到 localStorage usingJSON.stringify()并通过 using 检索JSON.parse()。它还将使您的代码更具可读性。
  3. 不要使用像“类”这样的变量名，这样很容易出错。改用“类别”或“类型”之类的东西。

当我查看您的页面时，出现此错误：“未定义表单”。所以你的 makeCharacter() 函数不起作用。

关于您关于显示结果的问题，您可以在“结果”div 中生成更多信息。你不限于一个文本。
我认为更好的选择是设置“结果”元素，以便您可以轻松地显示数据。例如：

<table id="result">
  <tr>
    <td>Name :</td>
    <td id="name"></td>
  </tr>
  ... Other characteristics
</table>

这样你就可以做一些简单的事情document.getElementById('name') = character.name ，当然，这个表会在字符生成之前被隐藏（使用'display' css 属性）

于 2012-04-24T07:33:32.270 回答