Typescript local storage compatibility

Question

Does Typescript somehow compatible with local storage? I set item via:

 localStorage.setItem('someString', JSON.stringify(MyTypescriptObject));

which stores object as plain string. For example:

 private _id: string;

 get id(): string {
   return this._id;
 }
 set id(value: string) {
   this._id = value;
 }

and when I get it via:

return <MyTypescriptObject>JSON.parse(localStorage.getItem('someString'));

I get:

{_id: "1"...}

If they are not compatible, I don't see any reason to use Typescript. Even worse, I have to rework all my current code in order to remove it.

You want to save the class as a JSON string and restore it from the JSON string at a later date ? — Titian Cernicova-Dragomir, Dec 12 '17 at 13:55
Yes, it's "compatible" with browser local storage, in that the storage mechanism works the way it works whether you're using TypeScript, Flow, Elm, or plain JavaScript. — Pointy, Dec 12 '17 at 13:55
It doesn't matter. The `localStorage` API is supplied by the browser. The browser doesn't know or care what framework or transpiled-to-JS language you use. — Pointy, Dec 12 '17 at 14:05

Titian Cernicova-Dragomir · Accepted Answer · 2017-12-12T14:32:15.773

3

The issue does not really have anything to do with local storage, you can save the class in the data in a JSON format, and then you have to restore the data to a new instance of the class.

You can easily add a constructor that takes the json object and applies it over the instance of the class:

class MyTypescript {
    constructor()
    constructor(id: string, name: string)
    constructor(data: Partial<MyTypescript>)
    constructor() {

        if (arguments.length == 1) {
            let data = arguments[0];
            Object.assign(this, data);
            return
        }
        let id = arguments[0];
        let name = arguments[1];
        this._id = id;
        this._name = name;
    }
    // Alternative to using a constructor, you can use MyTypescript.fromJson(data)
    public fromJson(data?: Partial<MyTypescript>) {
        var result = new MyTypescript();
        Object.assign(result, data);
        return result;
    }
    private _name: string;
    private _id: string;

    get id(): string {
    return this._id;
    }
    set id(value: string) {
    this._id = value;
    }
}

var obj = new MyTypescript();
obj.id = "10";
var data =  JSON.stringify(obj);
var obj2= new MyTypescript(JSON.parse(data));

More generally if all you are looking is for an object to hold some data, an interface might be a better approach. In Typescript it is overkill to declare a class with properties for a simple data class, a common practice is to declare an interface and assign object literals to variables of that type. And that will work more seamless with JSON

interface MyTypescript {
    id: string;
    name: string
}

var obj : MyTypescript = {
    id: "10",
    name: "foo"
};
var data = JSON.stringify(obj);
var obj2: MyTypescript = JSON.parse(data);

edited Dec 12 '17 at 14:32

answered Dec 12 '17 at 14:03

Titian Cernicova-Dragomir

230,986
31
415
357

My constructor looks like this constructor(id: string, name: string){this._id = id; this_name = name;} – IntoTheDeep Dec 12 '17 at 14:08
The version with `Partial` might be useful in other circumstances as well. I will change the code to add an overload to support both constructors. A static function might also work instead of a constructor, I will add that to the aswer as well – Titian Cernicova-Dragomir Dec 12 '17 at 14:10
var result = new MyTypescript(); // error expected two arguments – IntoTheDeep Dec 12 '17 at 14:23
and typescript says that It must not use more than one constructor – IntoTheDeep Dec 12 '17 at 14:24
multiple constructor implementation are not allowed – IntoTheDeep Dec 12 '17 at 14:25
I edited may answer, are you using the code from there ? You can't have multiple constructor implementations, but you can have multiple constructor signatures – Titian Cernicova-Dragomir Dec 12 '17 at 14:27
Typescript says I don't – IntoTheDeep Dec 12 '17 at 14:27
Just a sec to test again – IntoTheDeep Dec 12 '17 at 14:28
Not sure what is wrong but you can have multiple signatures : http://www.typescriptlang.org/play/index.html#src=class%20Foo%20%7B%0D%0A%20%20%20%20constructor()%0D%0A%20%20%20%20constructor(n%3A%20number)%0D%0A%20%20%20%20constructor(n%3A%20number%2C%20s%3A%20string)%0D%0A%20%20%20%20constructor()%20%7B%0D%0A%0D%0A%20%20%20%20%7D%0D%0A%7D – Titian Cernicova-Dragomir Dec 12 '17 at 14:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161033/discussion-between-teodorkolev-and-titian-cernicova-dragomir). – IntoTheDeep Dec 12 '17 at 14:31

Typescript local storage compatibility

1 Answers1