CODEWITHSUNDEEP
javascriptjavascript-objectssession-storage
Sanket Tarodekar
Sanket Tarodekar

Reputation: 302

sessionStorage not storing original object

I have an object which I'm getting by executing a function of SDK. When I try to store the object in session storage and the retrieve the object, the retrieved object looks same as original but when I perform operations on the new object I'm getting error.

var xyzObject = some_function();

sessionStorage.setItem("xyzObject",xyzObject);

var obj = JSON.parse(sessionStorage.getItem("xyzObject"));

obj.some_other_function();

It is showing an error as obj.some_other_function is not a function. Whereas xyzObject.some_other_function works perfectly.

Upvotes: 2

Views: 4905

Answers (4)

Lajos Arpad
Lajos Arpad

Reputation: 76573

sessionStorage stores key-value pairs, both being strings. So, whenever your

sessionStorage.setItem("xyzObject",xyzObject);

line executes, a key of xyzObject is upserted into sessionStorage and a string is stored as a value. Since xyzObject` is an object, it is converted into a string. Let's convert an object into a string and see what happens:

let foo = {
    a: 1,
    b: 2,
    c: function() {
        console.log(3);
    }
}

console.log(foo + "");

The result is

enter image description here

therefore we need to somehow convert our object into a string, because the automatic way is not exactly desirable.

    let foo = {
        a: 1,
        b: 2,
        c: function() {
            console.log(3);
        }
    }

    console.log(JSON.stringify(foo));

enter image description here

The result yields back the data members properly, but it fails to consider the function properly. So, how could we solve our problem? We could implement a function that recreates an object:

        function initializeObject(obj) {
            obj.c = function() {
                console.log(3);
            }
            return obj;
        }
        
        let foo = initializeObject({
            a: 1,
            b: 2,
        });
        
        let json = JSON.stringify(foo);
        
        console.log(json);
        
        let bar = initializeObject(JSON.parse(json));
        
        bar.c();

enter image description here

As you can see, when its stringified, it still does not have the function, but nevertheless we can reconstruct the object by parsing it into a JSON and appending the functions. So, your some_function should be modified to accept an object and whatever data-members it has, it should ensure that the resulting object would comply to them and functions will be appended.

Upvotes: 0

Axel Lopez
Axel Lopez

Reputation: 966

sessionStorage only stores strings as values.

If you want to store an object in sessionStorage, you must stringify the object into a JSON string, using the JSON.stringify() method.

const xyzObject = { name: "Juan" };

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

Then if you want to read the JSON string stored, you must parse it into a JavaScript object (or value, array, etc) , using the JSON.parse() method.

const xyzObjectRetrieved = JSON.parse(sessionStorage.get("xyzObject"));
// it should equal { name: "Juan" }

Source:

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 19986

You cannot store an object in the sessionStorage or localStorage. The only possible method is to stringify the object and save that in sessionStorage and on receiving the object from sessionStorage you just parse the object to JSON.

var xyzObject = some_function();

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

var stringData = sessionStorage.getItem("xyzObject");

var obj = JSON.parse(stringData);

obj.some_other_function();

Upvotes: 2

juju
juju

Reputation: 449

Try

sessionStorage.setItem('xyzObject', JSON.stringify(xyzObject);

And retrieve using:

  JSON.parse(sessionStorage.getItem('xyzObject'));

Upvotes: 3

Related Questions