Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Questions about client side storage

    I've been avoiding php and asp trying to do as much client-side as possible, as lightweight as possible, but don't know enough to know if I should go that route.

    I want to have several js/jquery games, really simple stuff like flash cards, memory games, matching, etc

    Currently when you do something correctly it adds 5 points like: points+=5; and if you get it wrong lose 3 points: points-=3;

    At the end of the game it flashes a play again button which resets points and all the cards, and that's it.

    So I was trying to think of ways to add a global variable that adds the latest score to it, and maybe gives you a random "prize" which would be another variable randomly selected from an array of "prizes", or better yet, "achievements"....between games....on the same domain. I'd like to eventually make something similar to a "crafting" system, where if you have 3 particular achievements you can convert them into some new achievement...I imagine just a function that checks if you have the 3 objects, then if so it adds some 4th object and removes the first 3.

    I was avoiding server side databases because I was avoiding authentication/user accounts for the time being...I would probably eventually like to let people play games, and if they want to save their scores long term, register an account....but if they don't want to register an account, I'd like them to have the same functionality for that session, where they can play a few games from around the site while accumulating a global score and list of achievement variables.

    I was messing around with jstorage, but am not sure if it will work for what I'm thinking....it only accepts strings, and I couldn't figure out how to write the variableName.toString() into the jstorage "value" of the key:value pair...it gives me the impression it's more for storing form data as a convenience to the user.

    So is there a client side variable storage that's simple, lightweight, and works with mobile? Or a way to write .toString() value of objects into jstorage?

    Or should I just break down and start investigating my server side options? Is there some middle ground where stuff can be done client side, then give the option to register to save that information long term?

    edit::I'm thinking of my 3 year old nieces ipad games, they're simple drag drop, highlight shapes, pattern association, etc but I want it so each time you play it remembers where you left off...basically a cookie would have been cool if it were bigger and not sent every packet....so kinda a "save-state" and "load-state" functionality..

    edit2::sqlite seems like a legitimate option but then reading through it, it gets convoluted how to implement on my bluehost account...
    Last edited by nuBee; 12-10-2011 at 06:44 PM.

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by nuBee View Post
    I was messing around with jstorage, but am not sure if it will work for what I'm thinking....it only accepts strings, and I couldn't figure out how to write the variableName.toString() into the jstorage "value" of the key:value pair...it gives me the impression it's more for storing form data as a convenience to the user.
    How about HTML5 localStorage?

    Here's a small piece of code I wrote to support local storage - you are free to use it (open source and all that stuff):

    Code:
    /***
     * support for HTML5 local storage
     * storage() - erase all stored data
     * storage('name') - reads data stored as "name" - return false if does not exist
     * storage('name', value) - writes data "value" as "name" - return false if failed
     * storage('name', null) - erase data stored as "name" - return false if failed
     **/
    function storage (name, value) {
        if (name !== undefined) {
            if (value === null) {
                localStorage.removeItem(name);
                return(storage(name) == false);
            } else {
                if (value != null) {
                    localStorage.setItem(name, JSON.stringify(value));
                    return(storage(name) == value);
                } else {
                    return JSON.parse(localStorage.getItem(name)) || false;
                }
            }
        } else {
            for (var x in localStorage) {
                localStorage.removeItem(x);
            }
        }
    };
    And you may wish to also use JSON-2 by Douglas Crockford (LINK) to support the JSON stringify and parse features used in the above code. The JSON code allows you to store OBJECTS as well as plain text in case you didn't know.

    You don't need Mr. Crockfords code for Firefox (or anything else I suspect) other than MSIE (of course).

    Or if you want to store ONLY simple data (strings and numbers), you can use this code instead - it's the same thing as above less the JSON calls:

    Code:
    /***
     * support for HTML5 local storage
     * storage() - erase all stored data
     * storage('name') - reads data stored as "name" - return false if does not exist
     * storage('name', value) - writes data "value" as "name" - return false if failed
     * storage('name', null) - erase data stored as "name" - return false if failed
     **/
    function storage (name, value) {
        if (name !== undefined) {
            if (value === null) {
                localStorage.removeItem(name);
                return(storage(name) == false);
            } else {
                if (value != null) {
                    localStorage.setItem(name, value);
                    return(storage(name) == value);
                } else {
                    return localStorage.getItem(name) || false;
                }
            }
        } else {
            for (var x in localStorage) {
                localStorage.removeItem(x);
            }
        }
    };
    Here's a usage example:

    Save my name to local storage as "name":

    Code:
        var myName = 'Roger';
        storage('name', myName);
    Read my name back:

    Code:
        var myName = storage('name');
        alert(myName);
    Delete my stored name:

    Code:
        storage('name', null);
    Wipe ALL local storage completely clean:

    Code:
        storage();
    Hope this is of some help to you.

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • Users who have thanked Krupski for this post:

    nuBee (12-10-2011)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Krupski View Post
    How about HTML5 localStorage?

    ...lots of good stuff...
    I spent all day reading and came back to localstorage and json2 stringify then came back and your code looks like a good implementation of it, but I still can't get it to work right, and since it's not just your code but other examples that aren't working I must be doing something wrong.....

    I downloaded json2 and linked it to my html page, and put your script in a file called storage.js and linked it as well.

    I can save/get text strings but can't get the objects to work even with the json2...I tried the json2 from the link you gave as well as one from jquery.json-2.3

    Code:
    var myScore =  'fifty';
    storage('score', myScore);
    
    function somefunction() {
    if(myCondition is true) {
    win();
    }
    }
    
    function win() {
    point += 5;
    showScore();
    alert(myScore);
    }
    will alert fifty when win() is triggered in the game...

    But when I try to set myScore = points; it returns 0 every time, while in my firebug I can see that points is 5, 10, 15, 20, etc

    Code:
    var points = 0;
    var myScore =  points;
    
    
    function somefunction() {
    if(myCondition is true) {
    win();
    }
    }
    
    function win() {
    point += 5;
    showScore();  //updates score div on screen
    storage('score',myScore);
    alert(myScore);
    }
    
    function lose() {
    points -= 5;
    showScore();   //updates score div on screen
    storage('score', myScore);
    alert(myScore);
    }
    Anything I'm missing?


    edit:: weird if I just put localStorage.score = points; then do alert(localStorage.score); it updates the points in the alert...
    Last edited by nuBee; 12-11-2011 at 05:59 AM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Why not simply use a (session?) cookie which works in all browsers?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •