/TypeScript/Share data across tab through localstorage

Share data across tab through localstorage

    import { Injectable, OnDestroy } from '@angular/core';
    import { Subject } from 'rxjs/Subject';
    import { share } from 'rxjs/operators';
    
    @Injectable()
    export class StorageService implements OnDestroy {
      private onSubject = new Subject<{ key: string, value: any }>();
      public changes = this.onSubject.asObservable().pipe(share());
    
      constructor() {
        this.start();
      }
    
      ngOnDestroy() {
        this.stop();
      }
    
      public getStorage() {
        let s = [];
        for (let i = 0; i < localStorage.length; i++) {
          s.push({
            key: localStorage.key(i),
            value: JSON.parse(localStorage.getItem(localStorage.key(i)))
          });
        }
        return s;
      }
    
      public store(key: string, data: any): void {
        localStorage.setItem(key, JSON.stringify(data));
        this.onSubject.next({ key: key, value: data})
      }
    
      public clear(key) {
        localStorage.removeItem(key);
        this.onSubject.next({ key: key, value: null });
      }
    
    
      private start(): void {
        window.addEventListener("storage", this.storageEventListener.bind(this));
      }
    
      private storageEventListener(event: StorageEvent) {
        if (event.storageArea == localStorage) {
          let v;
          try { v = JSON.parse(event.newValue); }
          catch (e) { v = event.newValue; }
          this.onSubject.next({ key: event.key, value: v });
        }
      }
    
      private stop(): void {
        window.removeEventListener("storage", this.storageEventListener.bind(this));
        this.onSubject.complete();
      }
    }

Source: stackoverflow.com

Similar codes

0 vote155 views1 answer
Nextjs waiting for compiling problem
TypeScript
0 vote168 views3 answers
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
TypeScript
0 vote160 views1 answer
Styled components gatsby
TypeScript
0 vote232 views1 answer
Error TS2503: Cannot find namespace 'google'. 10 @Input() mapOptions: google.maps.MapOptions;
TypeScript
0 vote236 views1 answer
Git rebase two commits to one
TypeScript
0 vote166 views1 answer
How to change woocommerce header message This is where you can add new products to your store.
TypeScript
-1 vote123 views2 answers
Jquery in angular
TypeScript
0 vote176 views1 answer
Async http requests python - Aiohttp
TypeScript
0 vote161 views1 answer
The Android Gradle plugin supports only Kotlin Gradle plugin version 1.3.40 and higher. The following dependencies do not satisfy the required version: project ':video_compress' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.31
TypeScript
-1 vote143 views1 answer
Could not find method kapt() for arguments [androidx.room:room-compiler:2.3.0] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
TypeScript