Typescript本地存储兼容性[重复]

Posted 2023-03-13

【中文标题】Typescript本地存储兼容性[重复]

【英文标题】：Typescript local storage compatibility [duplicate]

【发布时间】：2018-05-26 05:45:21

【问题描述】：

Typescript 是否与本地存储兼容？我通过以下方式设置项目：

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

将对象存储为纯字符串。例如：

 private _id: string;

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

当我得到它时：

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

我明白了：

_id: "1"...

如果它们不兼容，我认为没有任何理由使用 Typescript。更糟糕的是，我必须重新编写所有当前代码才能删除它。

【问题讨论】：

您希望将类保存为 JSON 字符串并在以后从 JSON 字符串中恢复它？

是的，它与浏览器本地存储“兼容”，因为无论您使用 TypeScript、Flow、Elm 还是纯 javascript，存储机制的工作方式都是如此。

@TitianCernicova-Dragomir 是的，正确的。

@Pointy 我使用 Angular 4

没关系。 localStorage API 由浏览器提供。浏览器不知道也不关心您使用什么框架或转译为 JS 的语言。

【参考方案1】：

这个问题其实和本地存储没什么关系，你可以把数据中的类保存成JSON格式，然后再把数据恢复到新的类实例中。

您可以轻松添加一个构造函数，该构造函数接受 json 对象并将其应用于类的实例：

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

更一般地说，如果您正在寻找一个对象来保存一些数据，那么接口可能是更好的方法。在 Typescript 中，为一个简单的数据类声明一个具有属性的类是多余的，一种常见的做法是声明一个接口并将对象字面量分配给该类型的变量。这将与 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);

【讨论】：

我的构造函数看起来像这个构造函数(id: string, name: string)this._id = id; this_name = name;

带有Partial 的版本在其他情况下也可能有用。我将更改代码以添加重载以支持这两个构造函数。静态函数也可以代替构造函数工作，我也会将其添加到 aswer 中

var 结果 = new MyTypescript(); // 错误需要两个参数

并且打字稿说它不能使用多个构造函数

不允许多个构造函数实现