CODEWITHSUNDEEP
javascripthtmlweb-storage
Carlos
Carlos

Reputation: 69

Save user input on HTML page using HTML5 web storage

I am creating a crossword puzzle web app that pulls XML data from a server, parses the data with javascript and builds the puzzle on the page using the [canvas] tag. When a user selects a clue and types in a correct answer, letters are placed in the corresponding squares of the crossword puzzle.

Here's a snippet of the code that places the letters in the corresponding squares:

function answer() {
if (this.value != '') {
    var letters = this.value.split('');
    var correct = xmlhttp.responseXML.getElementsByTagName(node)[0].getAttribute('a').split('');
    var numCorrect = 0;
    for (var i = 0; i < selected.length; i++) {
        if (letters[i]) {
            if (letters[i].toUpperCase() == correct[i]) {
                eval('ctx.drawImage(i'+letters[i].toLowerCase()+'b, '+((selected[i].id%15)*26)+', '+(Math.floor(selected[i].id/15)*26)+')');
                matrix[selected[i].id] = 1;
                numCorrect++;
            } else {
                matrix[selected[i].id] = 0;
            }
        }
    }       
    if (numCorrect == correct.length) {
        alert('Correct!');
        clearSelection();

    } else if (numCorrect == 0) {
        alert('Incorrect, try again.');
        document.getElementById('answer').value = '';
        document.getElementById('answer').focus();
    } else if (numCorrect != correct.length) {
        alert('Only some letters are correct.');
        clearSelection();
    }
    checkForWin();      
}
}

My question is, how do I save the state of the puzzle and the XML (using HTML5 web storage) so that the user can play offline and to prevent them from losing their progress in the event of a browser refresh?

Can anyone help me with this one, I am not very familiar with the HTML Web Storage API...but I hear that it is a valuable tool for web apps. Your advice will be much appreciated.

Thanks, Carlos

Upvotes: 2

Views: 1709

Answers (2)

John Munsch
John Munsch

Reputation: 19528

Unless the rest of your app depends upon being on HTML5 you might consider using a library like Lawnchair to wrap localStorage but also to provide alternative implementations for other browsers that had a storage mechanism, but not localStorage. If you do go with Lawnchair then I'd recommend pairing it with lccache.

If you decide to skip Lawnchair and stay with just localStorage, then I'll suggest you pair it with lscache. Both lscache and lccache are wrappers that reduce the API to simply:

value = l(c/s)cache.get("key");

l(c/s)cache.set("key", value);

l(c/s)cache.remove("key");

That's about as simple as it can get to save stuff, get it back out, etc. Plus, for stuff you only want to store for a while. When you put it into the cache with a set, you can specify how long until it expires.

Upvotes: 0

Infinity
Infinity

Reputation: 3875

You can save a JSON object or the state of your program inside html5 local storage by using the following javascript:

if(localStorage)
 localStorage.setItem("NAME", JSON/XML Object);

then you can fetch it later on by using

var savedGame = localStorage["NAME"];

One warning though, it will work on all browsers except for IE because they use something else as local storage.

Upvotes: 1

Related Questions