Storing nested objects in Angular's local storageAnswering the question on how

Question

Storing nested objects in Angular's local storageAnswering the question on how

Is there a way to specify when setting local storage, to add an object inside the existing object?

.ts

export function retrieveFromLocalStorage<T>(storageKey: string): T {
    return JSON.parse(localStorage.getItem(storageKey));
}

export const saveToLocalStorage = (storageKey: string, key: string, value: any) =>
    localStorage.setItem(storageKey, JSON.stringify({
        ...retrieveFromLocalStorage(storageKey),
        [key]: value
    }));
    
saveToLocalStorage('myObj', 'personalInfo', formValuesArray);

This is how it currently stores the value:

"personalInfo":[
      {
         "name":"test",
         "surname":"test2",
      }
   ],

This is how I want it to be stored:

  "personalInfo":{
      "underageChildInfo":[
         {
        "name":"test",
         "surname":"test2",
         }
      ]
   },

angular typescript

Answer 1

Answer №1

Here is a simple JavaScript code that should also function seamlessly in TypeScript:

class YoungPersonDetails{
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

class PersonalInformation{
  constructor(youngPersonDetails) {
    this.youngPersonDetails = youngPersonDetails;
  }
}

function execute() {
  var youngPersonDetails = new YoungPersonDetails("Alice", "Johnson");
  var personalInformation = new PersonalInformation(youngPersonDetails);

  localStorage.setItem('personalInformation', JSON.stringify(personalInformation));

  var pi2 = JSON.parse(localStorage.getItem('personalInformation'));

  console.log(pi2.youngPersonDetails.firstName + " " + pi2.youngPersonDetails.lastName);
}

Answer 2

Here is a simple JavaScript code that should also function seamlessly in TypeScript:

class YoungPersonDetails{
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

class PersonalInformation{
  constructor(youngPersonDetails) {
    this.youngPersonDetails = youngPersonDetails;
  }
}

function execute() {
  var youngPersonDetails = new YoungPersonDetails("Alice", "Johnson");
  var personalInformation = new PersonalInformation(youngPersonDetails);

  localStorage.setItem('personalInformation', JSON.stringify(personalInformation));

  var pi2 = JSON.parse(localStorage.getItem('personalInformation'));

  console.log(pi2.youngPersonDetails.firstName + " " + pi2.youngPersonDetails.lastName);
}

Answer 3

Answer №2

It seems like you are looking to create a dictionary. If that's the case, this reference could be useful:

var items = [{"name": "???"}, {"name": "###"}];
var dictionary = {"personal_data": {"childInfo": ""}}
dictionary["personal_data"]["child_info"] = JSON.stringify(items);
console.log(dictionary)

Answer 4

It seems like you are looking to create a dictionary. If that's the case, this reference could be useful:

var items = [{"name": "???"}, {"name": "###"}];
var dictionary = {"personal_data": {"childInfo": ""}}
dictionary["personal_data"]["child_info"] = JSON.stringify(items);
console.log(dictionary)

Storing nested objects in Angular's local storageAnswering the question on how

Answer №1

Answer №2

Similar questions

Filtering formArray controls in Angular based on a condition

Issues with the functionality of Angular and Material's multi-level menu and breadcrumb integration

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

Double Calling of Angular Subscription

Guide on utilizing an enum in typescript to establish a default prop value for a react component

Adding a type declaration to the severity property in React Alert - A guide to Typescript

Sluggish behavior detected in hybrid AngularJS and Angular application when accessed through Safari browser

Using Typescript: Defining a function parameter that can be either of two interfaces

Leveraging imported libraries from a parent class is a common practice in Angular

The anticipated data originates from the 'style' attribute, which is formally noted within the 'IntrinsicAttributes & TextInputProps & RefAttributes<TextInput>' type

Javascript's ParseFloat function returns a string instead of a number

I am struggling to make the map method display the specific components I need

Hamburger Menu in Bootstrap not functioning as expected

Unable to download essential dependencies using NPM

Tips for updating images dynamically in Angular 4

Looking for a way to configure webpack with typescript and style loaders for your project template

Update the TypeScript definitions in the index.d.ts file using the npm command, by overriding it with the reference types

Spartacus storefront is having trouble locating the .d.ts file when using Angular/webpack

Discovering the proper way to infer type for tss-react withParams and create

Use the reduce method to convert a JavaScript object from 2 to 1