typescript 在localStorage中存储对象

f2uvfpb9  于 2022-12-19  发布在  TypeScript
关注(0)|答案(4)|浏览(131)

我有一个这样的数组:

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

我把它存储在localstorage中,当我从localstorage中检索数据时,我得到了这个值:

[object, object]

我该如何解决这个问题?

    • 配置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;
  }

}
pvcm50d1

pvcm50d11#

本地存储仅限于处理字符串键/值对,您可以使用JSON.stringify执行以下操作,同时获取值JSON.parse

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

将对象放入存储:

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

从存储中检索对象:

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

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

2admgd592#

现在回答有点晚了,但我想等到将来的观众可以使用它时再回答,javascript通过引用使用对象,那么当我们将对象存储到localStorage时,真实的上我们存储的是对象的地址,而不是对象的内容!那么如果我们想存储对象的内容(绝对是我们想要的),我们应该如下所示:
存储方式如下:

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

像这样使用:

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

希望能有所帮助:)

luaexgnf

luaexgnf3#

不能存储没有String格式的内容。

LocalStorage始终以字符串格式存储键和值。

这就是为什么你应该把你的数据转换成字符串,不管它是 Array 还是 Object
要在localStorage中存储数据,首先使用**JSON.stringify()**方法将其字符串化。

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

然后,当您想要检索数据时,需要再次将String解析为Object。

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

ulydmbyx4#

使用localDataStorage可以轻松地将对象存储在本地存储中,您可以透明地设置/获取以下任何"类型":数组、布尔值、日期、浮点数、整数、Null、对象或字符串。
[免责声明]我是该实用程序的作者[/免责声明]
示例:

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

正如你所看到的,原始值是被尊重的。现在,在你的例子中,我们将这样做:

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

注意,你可以清楚地表达对象。(所有字符串化都是在后台为你完成的。)当我们检索密钥时,我们得到:

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

相关问题