Angular 2 本地存储答案

【问题标题】：Angular 2 localstorageAngular 2 本地存储
【发布时间】：2017-08-04 20:40:55
【问题描述】：

我正在尝试在角度 2 中使用 localstorage。我正在使用 angular cli。

app.component.ts

export class AppComponent implements OnInit {
    currentItem: string;
    newTodo: string;
    todos: any;

    constructor(){
        this.currentItem = (localStorage.getItem('currentItem')!==null) ? JSON.parse(localStorage.getItem('currentItem')) : [  ];
        localStorage.setItem('currentItem', JSON.stringify(this.currentItem));
        this.newTodo = '';
        this.todos = [];
    }

    addTodo() {
        this.todos.push({
            newTodo: this.newTodo,
            done: false
        });
        this.newTodo = '';
        localStorage.setItem('currentItem', JSON.stringify(this.todos));

    }

    ngOnInit(): void {}
}

app.component.html

 <div>
    <form (submit)="addTodo()">
        <label>Name:</label>
        <input [(ngModel)]="newTodo" class="textfield" name="newTodo">
        <button  type="submit">Add Todo</button>
    </form>
</div>

<ul class="heroes">
    <li *ngFor="let todo of todos; let i=index ">
        <input type="checkbox" class="checkbox" [(ngModel)]="todo.done" />
        <span [ngClass]="{'checked': todo.done}">{{ todo.newTodo }}</span>
        <span (click)="deleteTodo(i)" class="delete-icon">x</span>
    </li>
</ul>

<div>
    <button (click)="deleteSelectedTodos()">Delete Selected</button>
</div>

这是一个简单的 ToDo 列表，但是当我重新加载页面时它不会保留数据。

在 chrome 检查 > 应用程序 > 本地存储中，我看到了数据。当我重新加载页面时，数据仍然出现，但它没有出现在视图中，当我添加新的待办事项时，本地存储会删除旧项目并使用新的待办事项进行更新。

有人知道怎么解决吗？

【问题讨论】：

也看看这个answer

标签： javascript html angular local-storage

【解决方案1】：

像这样使用你的代码

constructor(){
    this.currentItem = (localStorage.getItem('currentItem')!==null) ? JSON.parse(localStorage.getItem('currentItem')) : [  ];
    this.todos = this.currentItem;
}

addTodo() {
    let local_items = localStorage.getItem('currentItem')
    local_items.push({
        newTodo: this.newTodo,
        done: false
    });
    localStorage.setItem('currentItem', JSON.stringify(local_items));
    this.newTodo = '';
}

原因：

在添加时在 localStorage 中设置数组，其中只有最新对象而不是旧对象。
在刷新页面时，您没有将 localStorage 对象分配给 todo 变量

【讨论】：

我收到一个错误：Property 'push' does not exist on type 'string'
我把它修好了！谢谢你的回答，对我帮助很大。

【解决方案2】：

我对 Pardeep Jain 提供的代码稍作修改，然后就醒了！

export class AppComponent implements OnInit {

    currentItem: string;
    newTodo: string;
    todos: any;

    constructor(){
        this.currentItem = (localStorage.getItem('currentItem')!==null) ? JSON.parse(localStorage.getItem('currentItem')) : [  ];
        this.todos = this.currentItem;
    }

    addTodo() {
        this.todos.push({
            newTodo: this.newTodo,
            done: false
        });
        this.newTodo = '';
        localStorage.setItem('currentItem', JSON.stringify(this.todos));
    }

    ngOnInit(): void {}
}

【讨论】：