javascript - HTML5 和 Javascript 字符保存

Question

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

但是，我遇到了一些问题。我怎样才能让点击“更新 Angular 色”按钮时只有更新过的东西发生变化？其次，展示结果的最佳方式是什么？

这是我当前的代码:

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();
}

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

[编辑] - Here is a link to the generator .

Answer 1

首先是关于您所做的一些想法:

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

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

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

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

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