Storing Objects in localStorage

Question

I have an array like this:

[{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}]

I stored it in localstorage and when I retrieving data from localstorage I got the value:

[object, object]

How can I solve this issue?

config.ts

import { Injectable } from "@angular/core";

@Injectable()
export class TokenManager {

  public tokenKey: string = 'app_token';

  constructor() { }    

  store(content) {
    var contentData;

    console.log("inside localstorsge store:", content);
    contentData = content.map(
      (data) => data.name
    )
    console.log("contentData:", contentData)
    localStorage.setItem(this.tokenKey, content);
  }

  retrieve() {
    console.log("inside localstorage");
    let storedToken: any = localStorage.getItem(this.tokenKey);
    console.log("storedToken:", storedToken);//====> here this console is[object object]
    if (!storedToken) throw 'no token found';
    return storedToken;
  }

}

Answer 1

local storage limited to handle only string key/value pairs you can do like below using JSON.stringify and while getting value JSON.parse

var testObject ={name:"test", time:"Date 2017-02-03T08:38:04.449Z"};

Put the object into storage:

localStorage.setItem('testObject', JSON.stringify(testObject));

Retrieve the object from storage:

var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Answer 2

it is a little late for answering, but I want to answer until future viewers can use it, javascript use objects by reference, then when we store an object to localStorage, in real we store the address of object , not the content of object! then if we want to store object content (absolutely we want), we should do like below:

store like this:

localStorage.setItem('my_item', JSON.stringify(my_object));   

and use like this:

var my_object = JSON.parse(localStorage.getItem('my_item'));

hope to be helpful :)

Answer 3

You cannot store something without String Format.

LocalStorage always store key and value in string format.

That is why you should convert your data to string whatever it is Array or Object.

To Store data in localStorage first of all stringify it using JSON.stringify() method.

var myObj = [{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}];
localStorage.setItem('item', JSON.stringify(myObj));

Then when you want to retrieve data , you need to parse the String to Object again.

var getObj = JSON.parse(localStorage.getItem('item'));

Answer 4

It's easy to store objects in local storage with localDataStorage, where you can transparently set/get any of the following "types": Array, Boolean, Date, Float, Integer, Null, Object or String.

[DISCLAIMER] I am the author of the utility [/DISCLAIMER]

Examples:

localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )

localDataStorage.get( 'key1' )   -->   'Belgian'
localDataStorage.get( 'key2' )   -->   1200.0047
localDataStorage.get( 'key3' )   -->   true
localDataStorage.get( 'key4' )   -->   Object {RSK: Array(5)}
localDataStorage.get( 'key5' )   -->   null

As you can see, the primitive values are respected. Now, in your case, we would do this:

>localDataStorage.set( 'testObject', { name : 'test', time : new Date( '2017-02-03T08:38:04.449Z' ) } )

Note that you can plainly express the object. (All the stringamication is done in the background for you.) When we retreive the key, we get:

>localDataStorage.get( 'testObject' ) -->
>Object {name: "test", time: "2017-02-03T08:38:04.449Z"}