HTML5 and Javascript Character Saving

Question

I am trying to update my Pathfinder Character generator to have the ability to save a character by using HTML5's web storage. I have a JavaScript file used to generate the character.

However, I'm running into a few problems. How can I make it so that only things that have been updated changed when clicking my "Update Character" button? Secondly, what would the best way to go about showing the results?

This is my current code:

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

When working with this, it changes the name regardless of whether I've deleted the character or not. Also, document.getElementById("result").innerHTML="Character Name: " + localStorage.name; doesn't allow me to update several fields at once. What would be a better way to do this?

[edit] - Here is a link to the generator.

Jocelyn LECOMTE · Accepted Answer · 2012-04-24 07:33:32Z

First some thoughts about what you've done:

I advice you to use the Modernizr library instead of typeof(Storage) !== "undefined" to know if localStorage is supported. It will be much more robust.
Instead of dealing with a bunch of variables, you should create something like a Character object, which will be saved into localStorage using JSON.stringify() and retrieved by using JSON.parse(). It will also make your code much more readable.
Don't use variable names like 'Class', it is too much error prone. Use something like 'category' or 'type' instead.

When I look at your page, I have this error: 'form is not defined'. So your makeCharacter() function doesn't work.

Regarding your question about showing the result, you could generate much more information within the 'result' div. You are not limited to one text.
I think a better option would be to set up the 'result' element so that you can show the data easily. For example:

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

This way you can do something easy like document.getElementById('name') = character.name Of course, this table would be hidden before the character is generated (using the 'display' css property)

Collectives™ on Stack Overflow

HTML5 and Javascript Character Saving

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related