is there any way to store the data created/edited in localstorage using json format

Question

is there any way to store the data created/edited in localstorage using json format where should i write the localstorage? in edit component or the main component where the function of getAllNotes() called

And mostly what is the use of this localstorage and sessionstorage?

.ts file export class NotesListComponent implements OnInit {

  public subscribe:Subscription;
  public notes:Notes[] = [];
  public inputText:string = '';

  constructor(private noteService:NotesService, private route:ActivatedRoute, private router:Router) { }

  ngOnInit() {
    this.subscribe = this.noteService.notesChangeInDOM.subscribe(
      (data:Notes[])=>{
        this.notes = data
      }
    )
  this.notes = this.noteService.getAllNotes()
  }

  onAddNewNote(){
    this.router.navigate(['newNote'],{relativeTo:this.route})
  }

  search(){
    if(this.inputText != ''){
      this.notes = this.notes.filter(res=>{
        return (res.name.toLocaleLowerCase().match(this.inputText.toLocaleLowerCase()) )
      })
    }else if(this.inputText == ''){
      this.ngOnInit()
    }
  }


}

service.ts

import { Injectable } from '@angular/core';
import { Notes } from '../models/noteModel';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NotesService {

  public notesChangeInDOM = new Subject<Notes[]>();

  private notes: Notes[] = [
    new Notes(
      'This Notes is related to the thing Dummy Content',
      new Date(2019,2,11,9,25,0),
      new Date(2019,2,11,9,25,0)
    ),
    new Notes(
      'The time that sun rises and sets is the most beautiful scene',
      new Date(2019,2,11,18,25,0),
      new Date(2019,2,11,18,25,0)
    ),
    new Notes(
      'The documents has to be uploaded to the cliets before the deadline',
      new Date(),
      new Date()
    ),
    new Notes(
      'Meeting has to be scheduled by this week',
      new Date(),
      new Date()
    ),
  ];


  constructor() { }


  setNotes(note:Notes[]){
    this.notes = note
  }

  getAllNotes(){
     return this.notes.slice()
  }

  getNoteById(id:number){
    return this.notes[id]
  }

  addNewNote(note:Notes){
    this.notes.push(note)
    return this.notesChangeInDOM.next(this.notes.slice())
  }

  editNote(id:number, note:Notes){
    this.notes[id] = note
    return this.notesChangeInDOM.next(this.notes.slice())   
  }

  deleteNote(id:number){
    this.notes.splice(id,1)
    return this.notesChangeInDOM.next(this.notes.slice())
  }

}

Answer 1

Look everything in javascript is object! Yes, there are some predefined APIs which can help you to manage the data in the browser localstorage.

Link : https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

Differnce between local and session seesion storage : What is the difference between localStorage, sessionStorage, session and cookies?

It may help you! :)