有什么方法可以使用 json 格式将数据 created/edited 存储在本地存储中

Question

有什么方法可以使用 json 格式将数据 created/edited 存储在本地存储中，我应该将本地存储写在哪里？在编辑组件或调用getAllNotes()函数的主组件中

主要是这个 localstorage 和 sessionstorage 有什么用？

.ts 文件 导出 class 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())
  }

}

Answer 1

localStorage 与 sessionStorage

localStorage 和 sessionStorage 完成完全相同的事情并且具有相同的 API，但是对于 sessionStorage，数据仅保留到 window 或选项卡关闭，而对于 localStorage，数据将保留直到用户手动清除浏览器缓存或直到您的网络应用程序清除数据。此 post 中的示例适用于 localStorage，但相同的语法适用于 sessionStorage。

会话存储
这为每个给定的来源维护了一个单独的存储区域，该区域在页面持续期间可用 session.This 会话将在选项卡关闭时刷新。

本地存储 使用 HTML5 将数据存储到客户端浏览器，它仅支持所有现代 browsers.Its 与会话存储相同，但持续时间超过浏览器关闭和重新打开。

创建条目

使用 localStorage.setItem 创建 key/value 对条目，提供键和值：

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
}

检查支持 通过检查 window 对象是否可用来测试 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);
}

Answer 2

看看 javascript 中的一切都是对象！是的，有一些预定义的 API 可以帮助您管理浏览器本地存储中的数据。

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

本地和会话会话存储的区别：What is the difference between localStorage, sessionStorage, session and cookies?

可能对你有帮助！ :)

有什么方法可以使用 json 格式将数据 created/edited 存储在本地存储中

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

angular

object

local-storage

angular7

angular-local-storage