I am going to Todo List by Angular. I use local storage to save todo items but when I refresh the data not shown, although the data saved in a tab application.
This is firebase link: https://gtodomvc.web.app/
This is stackBlitz link: https://stackblitz.com/github/ntgiang4991/todo?file=src%2Fapp%2Fcomponents%2Ftodo-list%2Ftodo-list.component.ts
This is my code: File localstorage.service.ts
export class LocalStorageService {
storage: Storage;
constructor() {
this.storage = window.localStorage
}
set(key: string, value: string): void{
this.storage[key] = value;
}
get(key: string): string{
return this.storage[key] || false;
}
setObject(key: string, value: any): void{
if(!value){
return;
}
this.storage[key] = JSON.stringify(value);
}
getValue<T>(key: string): T{
const obj = JSON.parse(this.storage[key] || null);
return <T>obj || null;
}
}
File todo.service.ts
private todos: Todo[] = [];
todos$: Observable<Todo[]> = this.displayTodosSubject.asObservable();
fetchFromLocalStorage(){
this.todos = this.storageService.getValue<Todo[]>(TodoService.TodoStorageKey) || [];
}
File todo-list.component.ts
todos$: Observable<Todo[]>;
ngOnInit(): void {
this.todos$ = this.todoService.todos$;
}
File todo-list.component.html
<app-todo-item *ngFor="let todo of todos$ | async" [todo]="todo"
(changeStatus)="onChangeTodoStatus($event)"
(editTodo)="onEditTodo($event)"
(deleteTodo)="onDeleteTodo($event)"
>
</app-todo-item>
File app.component.ts
ngOninit(){
this.todoService.fetchFromLocalStorage();
this.hasTodo$ = this.todoService.length$.pipe(map(length => length > 0));
console.log(this.todoService.length$)
}
