LocalStorage, JavaScript and Objects

Question

I need to store an object in localStorage - and I know that in order to do so, I have to convert the object into a string. All cool.

My problem is in actually creating the object in the first place: I have two values in sessionStorage that need to be added to the object which is then passed into localStorage. However, when I try to create the object, one value is being stored as the variable name rather than its (numeric) value. Any idea whats going on here?

var siteName = sessionStorage['1'];
var siteID = (+sessionStorage['2']);
var temp = {siteID:siteName};
alert(typeof siteID);
alert(JSON.stringify(temp));

The first alert confirms that siteID is indeed a number type, but the second alert shows that the variable name (siteID) is stored rather than its numeric value.

T.J. Crowder · Accepted Answer · 2016-05-24 10:14:56Z

4

This line:

var temp = {siteID:siteName};

...creates an object containing a property called siteId with the value taken from the siteName variable.

If you want the property name to be taken from the siteID variable instead:

var temp = {};
temp[siteID] = siteName;

Or in ES2015 (aka "ES6") you could use the new computed property name syntax:

// ES2015+ only!
var temp = {[siteId]: siteName};

In JavaScript, you can access/create properties on objects in two different but equal ways: Using dotted notation with a literal property name:

obj.foo = "bar";    // Creates a `foo` property on `obj` with the value `"bar"`

...or using bracketed notation and a string:

obj["foo"] = "bar"; // Does the same thing

The keys in object initializers like your var temp = {siteID:siteName}; are always used literally (although they can optionally be in quotes); there's no way with an object initializer to have a key taken from a variable instead. So you have to do it as a two-step process, first create the object, then set the property.

So, if you do

temp[siteID] = siteName;

...the number in siteID will be converted to a string and will become the property name, with the value of siteName being the value.

var temp = {};
var key = 1;
temp[key] = "value";
console.log(temp[1]); // "value"
console.log(temp["1"]); // "value"

(Property names are always strings in JavaScript [for now].)

edited May 24, 2016 at 10:14

answered May 16, 2012 at 13:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Squishy Over a year ago

Also thanks for the explanation (saw your enedited version first ;) ) - clearly explained what 3 useless tutorials couldn't!

T.J. Crowder Over a year ago

@Squishy: That's great to hear!

cliffs of insanity · Accepted Answer · 2012-05-16 13:21:30Z

2

Change it to this.

var temp = {};

temp[siteName] = siteID;

Or if the typeof test was meant to show the property name, you'd reverse them.

var temp = {};

temp[siteID] = siteName;

But be aware that siteID is considered a String from that point forward.

answered May 16, 2012 at 13:21

cliffs of insanity

3,7041 gold badge18 silver badges18 bronze badges

2 Comments

Evan Davis Over a year ago

I think you have the key/value backwards

cliffs of insanity Over a year ago

@Mathletics: Yes, you're right. I was confused by the typeof test, thinking that was meant to be the value. I'll update. Thanks for the hint.

Collectives™ on Stack Overflow

LocalStorage, JavaScript and Objects

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related