How can I target single object value in Angular Local Storage?

Question

In my Angular application I have maan field in my database. I am displaying the value of this field twice on my front end. One is static while other value will change.

I am using Angular Local Storage to save the dynamic value in 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. How can I resolve this issue?

Interface

export interface LikeWhen {
    maan: string;  
}

component.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

// --------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

Answer 1

You can simply use setItem and getItem like this:

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

To Update data dynamically on some event or something, you can use angular services and rxjs subject like this:

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/

Answer 2

When you use JSON.parse() , it creates a new JSON object from text (meaning its not the same reference to the original data).

In order for this to work in Angular, you would need to pass the original referenced data to the dynamic display/component.