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