CODEWITHSUNDEEP
javascripthtmlangularlocal-storage
Victor Mendes
Victor Mendes

Reputation: 179

Angular 2 localstorage

I'm trying to work with localstorage in angular 2. I'm using 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>

It's a simple ToDo list, but it doesn't persist the data when I reload page.

In chrome inspect > Application > Local Storage I see the data. when I reload page, the data still appears, but it doesn't appears on view and when I add a new todo item, the Local Storage delete old items and update with a new todo.

Does anyone know how to fix it?

Upvotes: 2

Views: 1317

Answers (2)

Victor Mendes
Victor Mendes

Reputation: 179

I modified a little the code provided for Pardeep Jain, and woked!

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

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86740

use your code like this

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

Reason:

  • at the time of adding you set array in localStorage which has only latest object not old objects.
  • on refreshing page you are not assigning localStorage objects to todo variable

Upvotes: 2

Related Questions