What is the best way to access a specific object value in Angular's Local Storage?

Question

What is the best way to access a specific object value in Angular's Local Storage?

In my Angular application, there is a field called maan in the database. The value of this field is displayed twice on the frontend - one static and the other dynamic.

To store the dynamic value, I am using Angular Local Storage in the saveChanges function. A new variable is created to hold this value:

var change_single_object = JSON.parse(localStorage.getItem('LikeWhen') || '{}') as LikeWhen
change_single_object.maan= maan; -------> This line tries to access the dynamic value (#term reference in html)

However, the above statement always refers to the 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

javascript angular typescript local-storage

Answer 1

Answer №1

If you want to store data locally, you can utilize the setItem and getItem methods as shown below:

localStorage.setItem('myDog', 'Rex');

const dog = localStorage.getItem('myDog');

For more information on this topic, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

To update data dynamically based on certain events, you can employ 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
  }
}

For further insights, visit:

Answer 2

If you want to store data locally, you can utilize the setItem and getItem methods as shown below:

localStorage.setItem('myDog', 'Rex');

const dog = localStorage.getItem('myDog');

For more information on this topic, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

To update data dynamically based on certain events, you can employ 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
  }
}

For further insights, visit:

Answer 3

Answer №2

By utilizing JSON.parse(), a fresh JSON object is generated from text, indicating it's distinct from the initial data reference.

To implement this in Angular successfully, you must transmit the original referenced data to the dynamic display or component.

Answer 4

By utilizing JSON.parse(), a fresh JSON object is generated from text, indicating it's distinct from the initial data reference.

To implement this in Angular successfully, you must transmit the original referenced data to the dynamic display or component.

What is the best way to access a specific object value in Angular's Local Storage?

Answer №1

Answer №2

Similar questions

Unraveling in jQuery

When the user clicks, the template data should be displayed on the current page

What is causing the Angular HTTP Post method error "Property 'post' is undefined"?

Stop the setTimeout function after redirecting in the controller

What is the best way to showcase a bootstrap dropdown within a limited height container while keeping the overflow hidden?

Utilizing a single AWS IoT connection for every component in Angular 6: A complete guide

Incorporate a dropdown feature into a data table column

Discover the magic of using jQuery's .map() method with

Steps for showing the text entered into the input box as soon as it is typed:

What is the best way to simulate fetch in Redux Async Actions?

How can we use the jQuery toggle function to hide and show elements based on

The Angular modal service is failing to show up on the screen

Activate the submission button only when all the necessary fields have been completed

ngSrc must be a fixed string

Utilizing PHP Variables in Jquery Ajax Success Response

The output of jQuery('body').text() varies depending on the browser being used

MERN stack does not have a defined onClick function

JavaScript's asynchronous callbacks

Navigating the application of interfaces within React using TypeScript

Exclude extraneous keys from union type definition