Save an input value to a behaviour subject

[valid laurel]

Dear experts:

I want to save an input value to a behavior subject. I want the input value to stay as a visible value once the user refreshes the page. I know how to do it with session storage and I now I want to try it with RxJs. I don't unserstand why my code isn't working. Thanks in advance

appcomponent:

import { Component, OnInit, VERSION } from '@angular/core';
import { InputValueService } from './Services/input-value.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  public inputValue = '';

  constructor(private observeInput: InputValueService) {}

  ngOnInit(): void {
    this.inputValue = this.observeInput.inputValue.getValue();
  }

  setSessionStorage(value: string) {
    this.inputValue = value;
    console.log(this.inputValue);
    return this.inputValue;
  }
}

appcomponent.hml

<input #box (keyup)="setSessionStorage(box.value)" [(ngModel)]="inputValue" />

<p>{{ inputValue }}</p>

inputservice.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class InputValueService {
  public inputValue = new BehaviorSubject<string>('');

  constructor() {}
}

stackblitz: https://angular-ivy-kxmwby.stackblitz.io

[hollow heron]

Hello. BehaviourSubject doesn't help you to store the value, if you refresh the application

In a BehaviourSubject you can 'save' a value, until you refresh the app

[valid laurel]

thank you for you reply. How can I save the value until the page refreshes?

[hollow heron]

You need something like a State Management. NgRX, or something simpler like an Service with an BehaviourSubject

[valid laurel]

I already have a service with a behaviour subject

[coarse echo]

do you mean when the page refreshes?

[hidden rapids]

isn't it a bit strong to use ngrx for a simple value when you can store it in the localstorage?

[valid laurel]

it is but my companive prefers to work with reactive programming.

[valid laurel]

yes

[hollow heron]

LocalStorage / Session Storage / Backend

[hidden rapids]

in the behaviorSubject you can do something like: this.subject$.pipe(tap((value) => this.saveLocalStorage(value))

each time a value is issued in the subject it is stored in the localstorage

[valid laurel]

The question is it possible to do it without localstorage. Thanks 🙂

[hidden rapids]

aaah but sessionstorage has nothing to do with localstorage