web-dev-qa-db-fra.com

Stockage d'objets dans le stockage local

J'ai un tableau comme celui-ci:

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

Je l'ai stocké dans localstorage et lorsque j'ai récupéré les données de localstorage j'ai eu la valeur:

[object, object]

Comment puis-je résoudre ce problème?

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

}
javascriptangulartypescript
18
Khushi

le stockage local est limité pour gérer uniquement les paires clé/valeur de chaîne que vous pouvez faire comme ci-dessous en utilisant JSON.stringify et en obtenant la valeur JSON.parse

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

Mettez l'objet en stockage:

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

Récupérer l'objet du stockage:

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

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

Il est facile de stocker des objets dans un stockage local avec localDataStorage , où vous pouvez définir/obtenir de manière transparente l’un des "types" suivants: Array, Boolean, Date, Float, Integer, Null, Object ou String.

[DISCLAIMER] Je suis l'auteur de l'utilitaire [/ DISCLAIMER]

Exemples:

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

Comme vous pouvez le constater, les valeurs primitives sont respectées. Maintenant, dans votre cas, nous ferions ceci:

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

Notez que vous pouvez clairement exprimer l'objet. (Toute la chaîne de caractères est faite en arrière-plan pour vous.) Lorsque nous récupérons la clé, nous obtenons:

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