Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I use Angular 4 and fill some filter data in my sessionStorage in my project component to store them during my browser session. I have also another component named navbar with methods like logout() . Now I want to clear my filter out of the sessionStorage if I click on logout() .

I tried this in my navBar Component:

logout (): void {
  sessionStorage.clear();
I also tried to implement this in my projectComponent:
import { Component, OnInit, Injectable } from '@angular/core';
public deleteFilter(){
  sessionStorage.clear();
And put this in the navbarComponent Constructor:
private project: Projects;
and use in my navbarComponent logout method a function call to let the project delete the session items.
logout (): void {
  this.project.deleteFilter();
But if I logout and login the filter are still stored.
I can delete them directly in my browser with pressing f12 => "Application" => "clear Storage"
Can someone please help me?
                I wish I could do it, but this is a very old project with a lot of dependencies and I can't update it to the newest. I tried once and everything crashed. So it will be a future task If I have more time for refactoring and updating.
– MiPoProg
                May 27, 2021 at 15:42
You can simply create an Angular service,
The service looks like this
import { Injectable } from '@angular/core';
@Injectable()
export class StorageService {
  constructor() {}
  public clear() {
    sessionStorage.clear();
Usage #1
import { Component, VERSION } from '@angular/core';
import { StorageService } from './storage.service';
@Component({
  selector: 'usage1',
  templateUrl: './usage1.component.html',
  styleUrls: ['./usage1.component.css']
export class Usage1Component {
  constructor(private storageService: StorageService) {
    // You can use the method like this
    this.storageService.clear();
Usage #2
import { Component, Input } from '@angular/core';
import { StorageService } from './storage.service';
@Component({
  selector: 'usage2',
  templateUrl: './usage2.component.html',
  styleUrls: ['./usage2.component.css']
export class Usage2Component {
  @Input() name: string;
  constructor(private storageService: StorageService) {
    // You can use the method like this
    this.storageService.clear();
                thank you for your help, I will try it with a service. Unfortunally I can't upvote your answer, because I have a new account with not enough points.
– MiPoProg
                May 27, 2021 at 15:57
                I tried to do it like your code, but It doesnt work for me. Is usage1 my projectComponent and usage2 the navbarComponent?
– MiPoProg
                May 27, 2021 at 16:22
                Your'e right, I tried console.log("test); in my logout method and it doesn't works. I think I have some problems to call this method. I will try and test some things but thank you for your help. I'm sure this service will work.
– MiPoProg
                May 27, 2021 at 16:31
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.