storing an object with localStorage without JSON

Question

I need to be able to save a user's information using localStorage or anything that works really. I don't know a lot about localStorage but I figure in order to store an object in it I would need a function in the object maker. Perhaps I'm wrong, but that's why I'm posting.

I think that you can use localStorage.username(this.username) to store username but I need to now how to store an entire object without using JSON stringify. localStorage.newPlayer()

JSfiddle link here

function Player(username, lvl, exp, expNeeded, nextLevel, gold, hp, atk, def, spd) {
    var self = this;
    this.username = username;
    this.lvl = lvl;
    this.exp = exp;
    this.nextLevel = nextLevel;
    this.expNeeded = expNeeded;
    this.gold = gold;
    this.fullLife = hp;
    this.hp = hp;
    this.atk = atk;
    this.def = def;
    this.spd = spd;
    this.implement = function() {
        $('#user').text(this.username).addClass('playerName').data('player', self);
        $('#username').text("Username: " + this.username);
        $('#lvl').text("Level: " + this.lvl);
        $('#exp').text("Experience: " + this.exp);
        $('#expNeeded').text("Experience Needed: " + this.expNeeded);
        $('#gold').text("Gold: " + this.gold);
        $('#hp').text("HP: " + this.fullLife);
        $('#attack').text("Attack: " + this.atk);
        $('#defense').text("Defense: " + this.def);
        $('#speed').text("Speed: " + this.spd);
        $('#nextLevel').text("Next Level: " + this.nextLevel);
    };
    this.implement();
}
if($('body').attr("id") == "Home") {
    var newPlayer = new Player(prompt("What is your username?"), 1, 0, 10, 10, 0, 10, 2, 1, 1);
}
playerEl = $('.playerName');
player = playerEl.data('player');

If you need to see the full code let me know

Possible duplicate of [Storing Objects in HTML5 localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — jrummell, Mar 17 '16 at 21:16
Please clarify your specific problem. Is there anything unexpected? What is it? — Sebastian Simon, Mar 17 '16 at 21:16

Scott Marcus · Answer 1 · 2016-03-27T00:02:00.807

1

Can you explain why JSON.stringify(new Player()) is not acceptable?

If you can't use JSON, you'd simply need to store each name/value pair into localStorage separately and get them out separately OR build a custom string of your own to place in localStorage, but JSON.stringify() is really the best fit for your scenario.

I think you just need to remove this from the Player function:

this.implement = function() {
    $('#user').text(this.username).addClass('playerName').data('player', self);
    $('#username').text("Username: " + this.username);
    $('#lvl').text("Level: " + this.lvl);
    $('#exp').text("Experience: " + this.exp);
    $('#expNeeded').text("Experience Needed: " + this.expNeeded);
    $('#gold').text("Gold: " + this.gold);
    $('#hp').text("HP: " + this.fullLife);
    $('#attack').text("Attack: " + this.atk);
    $('#defense').text("Defense: " + this.def);
    $('#speed').text("Speed: " + this.spd);
    $('#nextLevel').text("Next Level: " + this.nextLevel);
};
this.implement();

So that the player can be serialized into a JSON object that can then be set into localStorage.

That code would then be moved down into your if statement's true block and references to this would be replaced by your newPlayer object instance.

See this working fiddle: https://jsfiddle.net/LqgLxr0r/5/

edited Mar 27 '16 at 00:02

answered Mar 17 '16 at 21:23

Scott Marcus

64,069
6
49
71

It still breaks when I switch pages. I need the variable to be stored and be able to be called on another page, is there a different way to do that? – Shniper Mar 17 '16 at 21:28
You need to explain what "breaks" means. My fiddle shows the object being set in localStorage, so you'd just need to use `var player = JSON.parse(localStorage.getItem("player"));` on the next page. – Scott Marcus Mar 17 '16 at 21:31
after hitting ok on promp on home page I get http://prntscr.com/agl5qw if I go to battle page after this i get http://prntscr.com/agl678 sorry for not giving details but I've never worked with JSON or localStorage and really don't know what you need to know to figure it out. – Shniper Mar 17 '16 at 21:48
The problem is likely unrelated to storing json in localstorage. – Kevin B Mar 17 '16 at 21:49
@Shniper Whatever issues you are having are not related to the actual data being stored properly. If you look at the screen shot I provided, you can not only see the data on the web page, but you can see the object stored in localStorage with that data. The problem is most-likely that now that the data has been stored a certain way, your code that goes and gets it is incorrect. Please post that code. – Scott Marcus Mar 17 '16 at 21:53
here is home page https://jsfiddle.net/eg8bweeL/ and here is battle page which is breaking https://jsfiddle.net/24wv10c9/ thank you for having the patience to help me out by the way – Shniper Mar 17 '16 at 21:57
I'll take a look. But have a look at this fiddle: https://jsfiddle.net/u7hLLL54/1/ which first sets the data into localStorage and then gets it back out to display on the page. – Scott Marcus Mar 17 '16 at 21:59
@Shniper Yes, I've taken a look and the problem is that you are not getting the player back out of localStorage properly. See this corrected fiddle of yours: https://jsfiddle.net/u0vhfz0a/1/ – Scott Marcus Mar 17 '16 at 22:01
@Shniper And, on the other page, the problem is the same. You have to access the parsed JSON object as with this fiddle: https://jsfiddle.net/mxewhg7z/2/ – Scott Marcus Mar 17 '16 at 22:04
how would I make both pages work without needing seperate js files? I added everything you had in the battle one to the intro one but that doesn't work. – Shniper Mar 17 '16 at 22:10
In your .js file, make two functions, one that saves the data and one that gets the data. Based on an `if` decision, call the appropriate one as shown in this fiddle: https://jsfiddle.net/h9wcmuah/1/ That fiddle doesn't work though because I don't know what your criteria for saving vs. getting is, but it shows what you'd need to do. – Scott Marcus Mar 17 '16 at 22:38
storing things with javascript is seriously confusing. I guess I need to read up on a bunch of tutorials, thanks for helping – Shniper Mar 17 '16 at 22:42
It's really not. First, when you have data to store, you store it with `localStorage.setItem(nameForTheData, theActualData)`. Then, when you need the data you go get it with `localStorage.getItem(nameForTheData)`. You have to decide when the set vs. get operation needs to take place, but by putting each operation into its own function, it's just a matter of calling the right one at the right time. – Scott Marcus Mar 17 '16 at 22:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106661/discussion-between-shniper-and-scott-marcus). – Shniper Mar 17 '16 at 22:46
@ScottMarcus please join my chat when you have the chance – Shniper Mar 26 '16 at 23:37

mike tracker · Answer 2 · 2016-03-18T06:47:10.387

//global function

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
  }

  Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
  }


//page 1 code 

//your data
 var arrayObj = [{
    name: 'user4',
    userid: '1111',
    msg: 'hello world!'
  }, {
    name: 'user2',
    userid: '2222',
    msg: 'hello universe!'
  }];







    localStorage.setObject('userInfo', arrayObj);

// page 1 code ends here


// page 2 code

    if (window.localStorage) {

        var $val = localStorage.getObject('userInfo', arrayObj);
    }

// returns $val =   [{name: 'user4',userid: '1111',msg: 'hello world!'}, {name: 'user2',userid: '2222',msg: 'hello universe!'}];

storing an object with localStorage without JSON

2 Answers2