Save Data in Local Storage

Question

Hi

I have below data in Local Storage and i want to save data is studentObj. I am using Rective form

studentObj: Student = new Student();

studentList:Student[] = [];

get f(){

return this.form.controls;

}

Thanks

Vishal Joshi · Answer

Hello Ramco You can use the localStorage to store the data in local storage. please check-out the below code. To set the value: JSON.stringify() is needed if you are storing an object. localStorage.setItem('form-data', JSON.stringify(this.testform.value)); To get the stored object from localStorage: let formValue = JSON.parse(localStorage.getItem('form-data')) Thanks Vishal Joshi

Naimish Makwana · Answer

If you want to save data in studentObj and you are using Reactive Forms, you can do something like this: import { FormGroup, FormControl } from '@angular/forms'; // Assuming you have a Student class export class Student { name: string; age: number; // add other properties as needed } // Your component export class YourComponent implements OnInit { studentObj: Student = new Student(); studentList: Student[] = []; form: FormGroup; ngOnInit() { this.form = new FormGroup({ name: new FormControl(''), age: new FormControl(''), // add other controls as needed }); } get f() { return this.form.controls; } saveData() { this.studentObj = this.form.value; // This will save form data to studentObj this.studentList.push(this.studentObj); // This will add the studentObj to studentList } } In the above code, ngOnInit is used to initialize the form with FormControl for each field. The saveData method is used to save the form data to studentObj and then push studentObj to studentList . Remember to call saveData method when you want to save the data, for example, on a button click. Please replace 'name' , 'age' and other properties with your actual Student class properties. Also, don’t forget to import FormGroup and FormControl from @angular/forms . thanks

Jignesh Kumar · Answer

Hello Ramco, import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; class Student { // Define all your form properties of Student here constructor( public id?: number, public name?: string, public age?: number ) {} } @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'] }) export class StudentComponent implements OnInit { form: FormGroup; studentObj: Student = new Student(); studentList: Student[] = []; constructor(private fb: FormBuilder) { this.form = this.fb.group({ // Define your form controls here with all properties , e.g.: id: [''], name: [''], age: [''] }); } ngOnInit(): void { this.loadStudentData(); } get f() { return this.form.controls; } loadStudentData(): void { // Load data from local storage name with "studentObj" const studentData = localStorage.getItem('studentObj'); const studentListData = localStorage.getItem('studentList'); if (studentData) { this.studentObj = JSON.parse(studentData); // Set the form values with the data from local storage this.form.patchValue(this.studentObj); } if (studentListData) { this.studentList = JSON.parse(studentListData); } } saveStudentData(): void { // Get data from the form and save it to studentObj this.studentObj = this.form.value; // Save studentObj and studentList to local storage localStorage.setItem('studentObj', JSON.stringify(this.studentObj)); localStorage.setItem('studentList', JSON.stringify(this.studentList)); } addStudentToList(): void { // Now you can add the current studentObj to the studentList this.studentList.push(this.studentObj); // Save the updated studentList to local storage with new student details localStorage.setItem('studentList', JSON.stringify(this.studentList)); } }