Almacenamiento de sesiones en Angular

Aprenderemos sobre sessionStorage y cómo guardar, obtener, eliminar datos específicos o eliminar todos los datos en sessionStorage en Angular.

Almacenamiento de sesiones en Angular

sessionStorage mantiene un área de almacenamiento separada para cada origen disponible durante la sesión de la página. sessionStorage se vacía cuando se cierra la pestaña o ventana.

Guardar datos usando sessionStorage

Para almacenar datos en sessionStorage, crearemos una función saveData() dentro del archivo app.component.ts.

# angular
saveData(){

}

Dentro de la función saveData usaremos setItem para almacenar el nombre en sessionStorage.

# angular
saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
}

Nuestra función para almacenar datos en sessionStorage está completa.

Necesitamos editar nuestro archivo app.component.html y agregar un botón con el evento click a la función saveData(). Entonces, nuestro código en app.component.html se verá como a continuación.

# angular
<hello name="{{ name }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

Producción:

Cuando hacemos clic en el botón, guardará datos en el sessionStorage con la key del name.

Producción:

Obtener datos de sessionStorage

Discutiremos cómo obtener los datos almacenados en sessionStorage y mostrarlos.

Crearemos una función getData() en app.component.ts.

# angular
getData(){
    
  }

Dentro de la función getData() usaremos getItem para obtener los datos deseados en función de la key de sessionStorage.

# angular
getData(){
    return sessionStorage.getItem('name');
  }

Ahora hemos terminado con nuestra función y necesitamos mostrar los datos que obtuvimos de la función getData().

Editaremos app.component.html y reemplazaremos el atributo name de la etiqueta hello. Así que nuestro código en app.component.html se verá como a continuación.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

Producción:

Eliminación de datos específicos de sessionStorage

Discutiremos la eliminación de datos específicos en función de la key del sessionStorage al hacer clic en el botón.

Primero, crearemos la función removeData() en app.component.ts.

# angular
removeData(){
    
  }

Usaremos el removeItem para eliminar datos específicos del sessionStorage en función de la key. También agregaremos algunos datos adicionales en sessionStorage, que podemos eliminar para este ejemplo.

Nuestro código en app.component.ts se verá a continuación.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Session Storage in Angular 12 By Husnain';
  name = 'Angular ' + VERSION.major;

  saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
    sessionStorage.setItem('location', 'Pakistan');
  }
  getData() {
    return sessionStorage.getItem('name');
  }
  removeData() {
    sessionStorage.removeItem('location');
  }
}

En el código anterior, hemos agregado datos adicionales con la ubicación de la key en sessionStorage, eliminada al hacer clic en el botón.

Necesitamos crear un botón en app.component.html, que llamará a nuestra función removeData(). Entonces app.component.html se verá así.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>

También diseñaremos los botones para que se vean mejor y agregaremos el siguiente código en app.component.css.

# angular
p {
  font-family: Lato;
}
.btn{
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}

Producción:

Haremos clic en el botón Save Data para guardar la ubicación de sessionStorage. Después de eso, haremos clic en el botón Remove Location para eliminar los datos de ubicación de sessionStorage.

Eliminar todos los datos de sessionStorage

Discutiremos la eliminación de todos los datos de sessionStorage en Angular.

Crearemos la función deleteData() en el app.component.ts.

# angular
deleteData(){

  }

Usaremos clear para eliminar todos los datos de sessionStorage. Así que nuestro código se verá como a continuación.

# angular
deleteData(){
    sessionStorage.clear();
  }

Necesitamos crear un botón en app.component.html para llamar a la función deleteData(). Así que nuestro código se verá como a continuación.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>

Producción:

Resultado final:

Nuestros archivos se verán como a continuación al final.

app.component.ts:

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Session Storage in Angular 12 By Husnain';
  name = 'Angular ' + VERSION.major;

  saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
    sessionStorage.setItem('location', 'Pakistan');
  }
  getData() {
    return sessionStorage.getItem('name');
  }
  removeData() {
    sessionStorage.removeItem('location');
  }
  deleteData() {
    sessionStorage.clear();
  }
}

app.component.html:

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>

app.component.css:

# angular
p {
  font-family: Lato;
}
.btn {
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}