How can I use local storage in my Angular app with Angular CLI?

How can I use local storage in my Angular app with Angular CLI?

You can use the built-in localStorage API in your Angular app. First, ensure you have Angular CLI installed. Then, you can create a service to manage local storage.

Can you show me an example of a service that uses local storage?

Sure! Here's a simple service:

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

@Injectable({ providedIn: 'root' })
export class StorageService {
  setItem(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getItem(key: string) {
    return JSON.parse(localStorage.getItem(key) || 'null');
  }

  removeItem(key: string) {
    localStorage.removeItem(key);
  }
}

How do I use this service in my components?

You can inject the StorageService into your component's constructor and use its methods like this:

import { Component } from '@angular/core';
import { StorageService } from './storage.service';

@Component({ selector: 'app-example', templateUrl: './example.component.html' })
export class ExampleComponent {
  constructor(private storageService: StorageService) {}

  saveData() {
    this.storageService.setItem('myData', { name: 'John' });
  }

  loadData() {
    const data = this.storageService.getItem('myData');
    console.log(data);
  }
}