есть ли способ сохранить данные, созданные/отредактированные в локальном хранилище, используя формат json

Есть ли способ сохранить данные, созданные/отредактированные в локальном хранилище, используя формат json, где я должен написать локальное хранилище? в компоненте редактирования или в основном компоненте, где вызывается функция getAllNotes()

И в основном какая польза от этого локального хранилища и хранилища сессий?

файл .ts класс экспорта NotesListComponent реализует 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())
  }

}

angular object local-storage angular7 angular-local-storage
person Keerthana Bolloju    schedule 19.11.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Посмотрите, все в javascript является объектом! Да, есть некоторые предопределенные API, которые могут помочь вам управлять данными в локальном хранилище браузера.

Ссылка: https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

Разница между локальным хранилищем и хранилищем сеансов: в чем разница между localStorage, sessionStorage, session и cookies?

Это может помочь вам! :)

person Abhishek Gautam    schedule 19.11.2019

arrow_upward
0
arrow_downward

localStorage и sessionStorage

localStorage и sessionStorage выполняют одно и то же и имеют один и тот же API, но с sessionStorage данные сохраняются только до закрытия окна или вкладки, а с localStorage данные сохраняются до тех пор, пока пользователь вручную не очистит кеш браузера или пока ваше веб-приложение очищает данные. Примеры в этом посте предназначены для localStorage, но тот же синтаксис работает и для sessionStorage.

Хранилище сеансов
При этом сохраняется отдельная область хранения для каждого заданного источника, доступная на время сеанса страницы. Этот сеанс очищается при закрытии вкладок.

Локальное хранилище Храните данные в браузере на стороне клиента с помощью HTML5. Оно поддерживает только все современные браузеры. Это то же самое, что и хранилище сеансов, но сохраняется больше, чем даже при закрытии и повторном открытии браузера.

Создание записей

Создайте записи пары ключ/значение с помощью localStorage.setItem, указав ключ и значение:

let key = 'Item 1';
localStorage.setItem(key, 'Value');

Чтение записей

Прочитайте записи с помощью localStorage.getItem:

let myItem = localStorage.getItem(key);

Обновление записей Обновите запись так же, как если бы вы создали новую с помощью setItem, но с уже существующим ключом:

localStorage.setItem(key, 'New Value');

Удаление записей Удалите запись с помощью метода removeItem:

localStorage.removeItem(key);

Очистить все

Вот как очистить все, что хранится в localStorage:

localStorage.clear();

Хранение объектов Json

С помощью localStorage или sessionStorage можно хранить только строки, но вы можете использовать JSON.stringify для хранения более сложных объектов и JSON.parse для их чтения:

# Создать элемент:

let myObj = { name: 'Skip', breed: 'Labrador' };
    localStorage.setItem(key, JSON.stringify(myObj));

# Прочитать элемент:

 let item = JSON.parse(localStorage.getItem(key));

Проверка элементов Вот как можно проверить наличие элементов в loclaStorage:

if (localStorage.length > 0) {
  // We have items
} else {
  // No items
}

Проверка поддержки Проверьте поддержку localStorage, проверив, доступна ли она в объекте окна:

if (window.localStorage) {
  // localStorage supported
}

Итерация элементов

В localStorage или sessionStorage нет метода forEach, но вы можете перебирать элементы с помощью старого доброго цикла for:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(key, value);
}
person DeC    schedule 19.11.2019