How to store objects in HTML5 localStorage

0 votes

However, it appears that my object is being changed to a string when I try to store a JavaScript object in HTML5 localStorage.


Using localStorage, I can save and get primitive JavaScript types and arrays, but objects don't appear to function. Must they?

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);
typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

It appears to me that the input is converted to a string before being stored by the setItem method.

This behavior is present in Safari, Chrome, and Firefox, thus I infer that it is not a defect or restriction unique to any one browser but rather my misinterpretation of the HTML5 Web Storage definition.

I have made an effort to understand the structured clone algorithm that is mentioned in 2 Common infrastructure. I'm not sure what it's saying exactly, but perhaps my issue has to do with the fact that the properties of my object aren't enumerable (???).

Is there a simple solution?

Jul 24 in HTML by Ashwini
• 1,160 points
10 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In HTML

0 votes
0 answers

how to display an image inside SVG circle in html5?

is there a way to display an ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
10 views
0 votes
0 answers

how to create a HTML5 video element without it being shown in the page?

how is it possible to dynamically create ...READ MORE

Jul 5 in HTML by Tejashwini
• 1,660 points
12 views
0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
885 views
0 votes
0 answers

How to insert spaces/tabs in text using HTML/CSS

how to add space in HTML except ...READ MORE

Jun 3 in HTML by Tejashwini
• 1,660 points
25 views
0 votes
0 answers

How to create a vertical line in HTML?

I need to create a vertical line ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
10 views
0 votes
0 answers

How to remove a underline from a link in HTML?

how to remove the underline from a ...READ MORE

Jul 5 in HTML by Tejashwini
• 1,660 points
15 views
0 votes
0 answers

HTML5 Local storage vs. Session storage

Are there any advantages to session storage ...READ MORE

Jul 26 in HTML by Ashwini
• 1,160 points
6 views
0 votes
1 answer

How to store an array in localstorage?

Localstorage only supports Strings. So you can ...READ MORE

answered Jul 1, 2019 in Others by sunshine
• 1,280 points
18,941 views
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,500 points
404 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP