[英]How can I target single object value in Angular Local Storage?
In my Angular application I have maan
field in my database.在我的 Angular 应用程序中,我的数据库中有
maan
字段。 I am displaying the value of this field twice on my front end.我在前端显示该字段的值两次。 One is static while other value will change.
一个是 static 而其他值会发生变化。
I am using Angular Local Storage to save the dynamic value in saveChanges
function.我正在使用 Angular Local Storage 将动态值保存在
saveChanges
function 中。 I am using new variable to store the value我正在使用新变量来存储值
var change_single_object = JSON.parse(localStorage.getItem('LikeWhen') || '{}') as LikeWhen
change_single_object.maan= maan; -------> Here I am trying to access dynamic value (#term reference in html)
But the above statement always refer to Static Value.但上面的说法总是指 Static 的值。 How can I resolve this issue?
我该如何解决这个问题?
Interface界面
export interface LikeWhen {
maan: string;
}
component.ts组件.ts
export class RufusComponent {
@ViewChild('term') editElem!: ElementRef<HTMLTableDataCellElement>;
saveChanges(rec: LikeWhen, new_value: HTMLTableDataCellElement) {
localStorage.setItem('LikeWhen', JSON.stringify(rec));
var change_single_object = JSON.parse(localStorage.getItem('LikeWhen') || '{}') as LikeWhen
change_single_object.maan= maan;-------------> PROBLEM (Refers to static value)
localStorage.setItem('LikeWhen', JSON.stringify(change_single_object));
}
}
.html .html
// --------static value
<mat-list-item>Static Value Amazon</mat-list-item>
<mat-list>{{latestData.maan}}</mat-list>
<mat-divider></mat-divider>
// -------dynamic value
<mat-list-item>Dynamic Value</mat-list-item>
<mat-list class="textFields">
<table>
<tr>
<td [innerHTML]='latestData.replaceHTML' #term></td>
</tr>
</table>
</mat-list>
//button
<button mat-raised-button type='button' [disabled]='confirmDisabled' (click)='saveChanges(latestData, term)'>Confirm
You can simply use setItem
and getItem
like this:您可以像这样简单地使用
setItem
和getItem
:
localStorage.setItem('myCat', 'Tom');
const cat = localStorage.getItem('myCat');
For more on this you can look at: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage有关这方面的更多信息,您可以查看: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
To Update data dynamically on some event or something, you can use angular services and
rxjs
subject like this:要在某些事件或某事上动态更新数据,您可以使用 angular 服务和
rxjs
主题,如下所示:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LocalStorageService {
localStorage: Storage;
changes$ = new Subject();
constructor() {
this.localStorage = window.localStorage;
}
get(key: string): any {
if (this.isLocalStorageSupported) {
return JSON.parse(this.localStorage.getItem(key));
}
return null;
}
set(key: string, value: any): boolean {
if (this.isLocalStorageSupported) {
this.localStorage.setItem(key, JSON.stringify(value));
this.changes$.next({
type: 'set',
key,
value
});
return true;
}
return false;
}
remove(key: string): boolean {
if (this.isLocalStorageSupported) {
this.localStorage.removeItem(key);
this.changes$.next({
type: 'remove',
key
});
return true;
}
return false;
}
get isLocalStorageSupported(): boolean {
return !!this.localStorage
}
}
this link will help more on this: https://firstclassjs.com/persist-data-using-local-storage-and-angular/此链接将对此提供更多帮助: https://firstclassjs.com/persist-data-using-local-storage-and-angular/
When you use JSON.parse()
, it creates a new JSON object from text (meaning its not the same reference to the original data).当您使用
JSON.parse()
时,它会从文本中创建一个新的 JSON object (这意味着它对原始数据的引用不同)。
In order for this to work in Angular, you would need to pass the original referenced data to the dynamic display/component.为了使它在 Angular 中工作,您需要将原始引用数据传递给动态显示/组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.