localStorage 在 Angular 中似乎不起作用
localStorage does not seem to work in Angular
我有一个简单的服务,它通过使用 localStorage 获取和设置本地 NOTES 对象数组中的项目,但每次页面刷新时,之前输入的数据都会丢失,并且只保留 const NOTES 数组中的初始数据。我不知道我在这里做错了什么。
服务代码:
import { Injectable } from '@angular/core';
import { NOTES } from './localnotes';
import { INote } from './shared/interfaces';
const STORAGE_KEY = 'notes';
@Injectable({
providedIn: 'root'
})
export class NotesService {
constructor() {
localStorage.setItem(STORAGE_KEY, JSON.stringify(NOTES));
}
getNotes() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY));
} catch (e) {
console.error('Error getting data from localStorage', e);
return null;
}
}
deleteNotes() {
}
newNote(note: INote) {
const tempnote = note;
NOTES.push(tempnote);
localStorage.setItem(STORAGE_KEY, JSON.stringify(NOTES));
}
}
组件代码:
import { Component, OnInit} from '@angular/core';
import { INote } from '../shared/interfaces';
import { NotesService } from '../notes.service';
@Component({
selector: 'app-notes',
templateUrl: './notes.component.html',
styleUrls: ['./notes.component.css']
})
export class NotesComponent implements OnInit {
notes: INote[];
newNote: boolean = false;
hideNewNote: boolean = false;
constructor(private noteService: NotesService) {
const data = noteService.getNotes();
this.notes = data;
}
ngOnInit() {
}
makeNewNote() {
this.newNote = true;
}
getValues(title, note, tag) {
this.newNote = false;
const tempnote = {title: title, note: note, date: new Date(),
tag: tag};
this.noteService.newNote(tempnote);
this.notes = this.noteService.getNotes();
}
}
常量注释:
import { INote } from './shared/interfaces';
export const NOTES: INote[] = [
{title: "title1", note: "note1", date: new Date(), tag: "tag1"}
];
这是因为您在构造函数中将 NOTES
变量分配给本地存储。在每次页面重新加载时,它都会用本地存储数据替换空数组。
你可以这样做:
constructor() {
let mergedValues = [...NOTES];
const previousValues = localStorage.getItem(STORAGE_KEY);
if(previousValues){
mergedValues = [...JSON.parse(previousValues)];
}
localStorage.setItem(STORAGE_KEY, JSON.stringify(mergedValues));
}
每次刷新都会覆盖数据,需要检查是否存在。像这样尝试:
constructor() {
if(!this.getNotes()){
localStorage.setItem(STORAGE_KEY, JSON.stringify(NOTES));
}
}
我有一个简单的服务,它通过使用 localStorage 获取和设置本地 NOTES 对象数组中的项目,但每次页面刷新时,之前输入的数据都会丢失,并且只保留 const NOTES 数组中的初始数据。我不知道我在这里做错了什么。
服务代码:
import { Injectable } from '@angular/core';
import { NOTES } from './localnotes';
import { INote } from './shared/interfaces';
const STORAGE_KEY = 'notes';
@Injectable({
providedIn: 'root'
})
export class NotesService {
constructor() {
localStorage.setItem(STORAGE_KEY, JSON.stringify(NOTES));
}
getNotes() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY));
} catch (e) {
console.error('Error getting data from localStorage', e);
return null;
}
}
deleteNotes() {
}
newNote(note: INote) {
const tempnote = note;
NOTES.push(tempnote);
localStorage.setItem(STORAGE_KEY, JSON.stringify(NOTES));
}
}
组件代码:
import { Component, OnInit} from '@angular/core';
import { INote } from '../shared/interfaces';
import { NotesService } from '../notes.service';
@Component({
selector: 'app-notes',
templateUrl: './notes.component.html',
styleUrls: ['./notes.component.css']
})
export class NotesComponent implements OnInit {
notes: INote[];
newNote: boolean = false;
hideNewNote: boolean = false;
constructor(private noteService: NotesService) {
const data = noteService.getNotes();
this.notes = data;
}
ngOnInit() {
}
makeNewNote() {
this.newNote = true;
}
getValues(title, note, tag) {
this.newNote = false;
const tempnote = {title: title, note: note, date: new Date(),
tag: tag};
this.noteService.newNote(tempnote);
this.notes = this.noteService.getNotes();
}
}
常量注释:
import { INote } from './shared/interfaces';
export const NOTES: INote[] = [
{title: "title1", note: "note1", date: new Date(), tag: "tag1"}
];
这是因为您在构造函数中将 NOTES
变量分配给本地存储。在每次页面重新加载时,它都会用本地存储数据替换空数组。
你可以这样做:
constructor() {
let mergedValues = [...NOTES];
const previousValues = localStorage.getItem(STORAGE_KEY);
if(previousValues){
mergedValues = [...JSON.parse(previousValues)];
}
localStorage.setItem(STORAGE_KEY, JSON.stringify(mergedValues));
}
每次刷新都会覆盖数据,需要检查是否存在。像这样尝试:
constructor() {
if(!this.getNotes()){
localStorage.setItem(STORAGE_KEY, JSON.stringify(NOTES));
}
}