无法在 localStorage 中保存对象答案

【问题标题】：Cannot save object in localStorage无法在 localStorage 中保存对象
【发布时间】：2018-07-02 15:34:31
【问题描述】：

我一直在尝试使用 localStorage 保存对象，但它不起作用。我是 Angular2 的新手。

这是我的 app.component 代码

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    text = [];
    title = 'app works!';
    passText(i) {
        console.log(i);
        localStorage.setItem('text', JSON.stringify(i));
    }
}

这是我的 component.html 代码

<div>
    <input type="text" name="" [(ngModel)]="text.text">
    <input type="text" name="" [(ngModel)]="text.newData">
    <button class="btn btn-primary" (click)="passText(text)">submit</button>
</div>

【问题讨论】：

您需要比“它不起作用”更具体。正在发生什么，应该发生什么？
console.log(i); 是否显示结果？
它正在本地存储中保存一个空对象
如果您想要一个对象，请尝试将text = [] 更改为text = {}
Core972，是的，结果显示为 [text: "mb nmb", newData: "nmdms"]

标签： javascript angular local-storage

【解决方案1】：

你可以试试这个解决方案

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    text:any ={
        text:'',
        newData:''
    } ;
    title = 'app works!';
    passText(i) {
        console.log(i);
        localStorage.setItem('text', JSON.stringify(i));
    }
    getData() {
        console.log(JSON.parse(localStorage.getItem('text')));
    }
}



<div>
    <input type="text" [(ngModel)]="text.text">
    <input type="text" [(ngModel)]="text.newData">
    <button class="btn btn-primary" (click)="passText(text)">submit</button>
    <button class="btn btn-primary" (click)="getData()">Get Data from Local storag</button>
</div>

【讨论】：

【解决方案2】：

这是一个工作示例，

HTML 文件，

<div>
  <input type="text" name="" [(ngModel)]="text.text">
  <input type="text" name="" [(ngModel)]="text.newData">
  <button class="btn btn-primary" (click)="passText(text)">submit</button>
</div>
Output
{{model | json}}

打字稿文件，

 model:any[]=[]; // for display output 
 text:any = {};  //changed variable array to object type.
  passText(i) {
      console.log("Data",i);
      localStorage.setItem('text', JSON.stringify(i));
  }
  getText(){
      this.model=JSON.parse(localStorage.getItem('text'));
  }

输出截图，

希望对你有帮助。

【讨论】：

【解决方案3】：

有一种通用的方法来处理这个你甚至不需要 setItem 并且你不需要使用 stringify 进行序列化，即使 localStorage 可以自己序列化。请找到更新的片段。

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    text = [];
    title = 'app works!';
    passText(i) {
        console.log(i);
        localStorage['text'] = i;
    }
}

注意：- 您不能在 JavaScript 中序列化事件。如果这样做，一些实现属性（如 event.target）将丢失。

【讨论】：

我正在使用这种技术，它只是在本地存储中生成一个空文本。你能更新任何工作的小提琴或 plunker
@kshitiz 能否在 passText 方法中附上console.log(i); 和console.log(JSON.stringify(i)); 的日志