When it comes to localStorage or sessionStorage in Angular, you're not limited to just storing strings.

Well... yeah you are. But stay with me here and I'll explain what I mean by that first sentence.

You can store complex objects in localStorage or sessionStorage as well. You just have to store them as strings.

I'll show you how to do that in this guide.


It's simple: take your complex object and stringify it.

Fortunately, you can do that easily enough with JSON.stringify().

Let's say you're working on a CRM application and you've got an object that represents a contact.

That object includes lots of relevant details such as the contact's first name, last name, email address, and so on.

And, for whatever reason, you need to put that object in localStorage. Unfortunately, you can't do this:

localStorage.setItem("contact", contact);

That's because the contact object isn't a string. 

You can, however, do this:

localStorage.setItem("contact", JSON.stringify(contact));

That will create a string representation of the contact object and put it in localStorage.

What does that string representation look like? Well, it looks like a JSON string.

Because that's what it is.

The JSON part of JSON.stringify() is a dead giveaway that it converts the object into a string in JSON format.

But that's fine. Because for most cases, a string representation of your TypeScript object will work.

All the data that you need is there. It's just not represented as an object while it's in storage.

By the way, you can do the same thing with sessionStorage.

sessionStorage.setItem("contact", JSON.stringify(contact));

Yep. That'll work, too.

Reversing Course

Thus far, I've only covered handling this solution in one direction: converting an object to a string and storing it in localStorage or sessionStorage.

But how do you get it back and return it to its orginal TypeScript object state?

That's what I'll cover in this section.

Go with something like this:

let contactStr: string = localStorage.getItem("contact");

if (contactStr) {
    this.contact = JSON.parse(contactStr) as Contact;

The first line retrieves the stringified object and stores as contactStr. But you still need to convert it back to an object.

The if check is just a failsafe that ensures the code doesn't try to convert something that's undefined.

The line in the middle of the if block does the actual conversion.

JSON.parse() converts the string back to an object state. But it doesn't work in isolation.

That's why the as Contact bit appears at the end of that line. It converts the string to an object of type Contact.

In this application, Contact is an interface that defines various properties, such as firstName, lastName, emailAddress, and more.

So the object isn't just an any. It's an object of a type that's defined by the developer in the application.

That's the pattern I'd recommend you follow when going this route.

Wrapping It Up

There you have it. An easy way to store an object (as a string) in localStorage or sessionStorage within your Angular app.

Now it's up to you to take what you've learned here and make it your own.

Have fun!

Photo by JESHOOTS.com from Pexels