如何从本地存储对象访问特定属性？ （角度2 /角度2-本地存储）

Question

So I'm storing an object into local storage using angular-2-local-storage as such:

this.localStorage.set('myObject', {'prop1': "string", 'prop2': "string"});

Then I'm trying to get a specific property of that object as such:

this.localStorage.get('myObject').prop1;

But doing this gives me the error Property 'prop1' does not exist on type '{}'

I've also tried storing the object in a local variable, and then trying to access the property as such, but it gives me the same error.

var myObject = this.localStorage.get('myObject'); var myProperty = myObject.prop1;

What am I doing wrong, and how do I access the data?

Answer 1

I'm using localStorage.setItem / localStorage.getItem with Angular2, so it's maybe not the same behavior. But have you tried by stringifying and parsing your object ?

In my case :

localStorage.setItem('myObject', JSON.stringify({'prop1': "string", 'prop2': "string"}));
let temp = JSON.parse(localStorage.getItem('myObject'));
temp.prop1; // gives "string"

In your case, something like :

localStorage.set('myObject', JSON.stringify({'prop1': "string", 'prop2': "string"}));
let temp = JSON.parse(localStorage.get('myObject'));
temp.prop1;

Hope it cans help !

Answer 2

You must save the object as a string

localStorage.setItem('myObjectName', JSON.stringify(this.myObject)); 

and then obtain the string and convert it to an object

  this.myObject =  JSON.parse(localStorage.getItem('myObjectName')); 

Answer 3

Can you provide more details about how you are configuring you angular2 local storage. I checked the source code and its doing the parsing and stringifing before you get or set respectively.I have not tested it but you should be able to do the following:

 import { LocalStorageModule } from 'angular-2-local-storage';

@NgModule({
    imports: [
        LocalStorageModule.withConfig({
            prefix: 'my-app',
            storageType: 'localStorage'
        })
    ],
    declarations: [
        ..
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

and then in you component you can inject this service as following

constructor (
        private localStorageService: LocalStorageService
    ) {

    }
ngOnInit() {
    this.localStorageService.set(key, value);
    console.log(this.localStorageService.get(key));
}

You dont have to parse or stringify anything. Hope this will help. AGAIN: I have not tested it this code is entirely based on angular-2-local-storage documentation.