Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

How to store objects in HTML5 localStorage/sessionStorage

I'd like to store a JavaScript object in HTML5 localStorage, but my object is apparently being converted to a string.

I can store and retrieve primitive JavaScript types and arrays using localStorage, but objects don't seem to work. Should they?

Here's my code:

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);

The console output is

typeof testObject: object
testObject properties:
 one: 1
 two: 2
 three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

It looks to me like the setItem method is converting the input to a string before storing it.

I see this behavior in Safari, Chrome, and Firefox, so I assume it's my misunderstanding of the HTML5 Web Storage specification, not a browser-specific bug or limitation.

I've tried to make sense of the structured clone algorithm described in 2 Common infrastructure . I don't fully understand what it's saying, but maybe my problem has to do with my object's properties not being enumerable (???).

Is there an easy workaround?

Update: The W3C eventually changed their minds about the structured-clone specification, and decided to change the spec to match the implementations. See 12111 – spec for Storage object getItem(key) method does not match implementation behavior . So this question is no longer 100% valid, but the answers still may be of interest.

Answer*

This question has been answered sufficiently from the JavaScript-only perspective, and others have already noted that both `localStorage.getItem` and `localStorage.setItem` have no concept of objects—they handle strings and strings only. This answer provides a TypeScript-friendly solution that incorporates what [others](https://stackoverflow.com/a/2010948/39155) [have](https://stackoverflow.com/a/3146971/39155) [suggested](https://stackoverflow.com/a/4762411/39155) in JavaScript-only solutions.

## TypeScript 4.2.3

 Storage.prototype.setObject = function (key: string, value: unknown) {
 this.setItem(key, JSON.stringify(value));
 };
 
 Storage.prototype.getObject = function (key: string) {
 const value = this.getItem(key);
 if (!value) {
 return null;
 }
 
 return JSON.parse(value);
 };
 
 declare global {
 interface Storage {
 setObject: (key: string, value: unknown) => void;
 getObject: (key: string) => unknown;
 }
 }


### Usage


 localStorage.setObject('ages', [23, 18, 33, 22, 58]);
 localStorage.getObject('ages');

### Explanation

We declare both `setObject` and `getObject` functions on the `Storage` prototype—`localStorage` is an instance of this type. There's nothing special we really need to note besides the null handling in `getObject`. Since `getItem` can return `null`, we must exit early since calling `JSON.parse` on a `null` value will throw a runtime exception.

After declaring the functions on the `Storage` prototype, we include their type definitions on the `Storage` type in the global namespace.

Note: If we defined these functions with arrow functions, we'd need to assume that the storage object we're calling is always `localStorage`, which might not be true. For instance, the above code will add `setObject` and `getObject` support to `sessionStorage` as well.

Draft saved

Draft discarded

Edit Summary*

Cancel

1

It's generally not a good idea to monkey-patch a global shipped by the browser. It can break other code, and it's not future-compatible.

Flimm
– Flimm

2021年12月16日 18:53:31 +00:00
Commented Dec 16, 2021 at 18:53

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

default

CollectivesTM on Stack Overflow

How to store objects in HTML5 localStorage/sessionStorage

Answer*