How to sync the state data saved in localstorage across all tabs using Ngxs state management?

[mahmudabir]

I am saving all data of the state after converting it to base64 format using Ngxs state management library. I can get all data across all tabs. But if I change a data in one tab it does not sync in the other tabs. To sync the data I have to refresh the tab. Is there any way to sync full state in all tabs if the state is changed in one tab?

Here is my code of AppModule:

@NgModule({
  declarations: [
    AppComponent,
    ReadComponent,
    CreateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxsModule.forRoot([
      TutorialState
    ]),
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    NgxsStoragePluginModule.forRoot({
      storage: StorageOption.LocalStorage,
      serialize: (state) => btoa(JSON.stringify(state)),
      deserialize: (state) => JSON.parse(atob(state))
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

[Andreas-Hjortland]

I have actually created a plugin which does this by virtue of messaging between the tabs instead of trying to save it to a common store since I don't think ngxs is supposed to dynamically load the state from the store if it is changed (i might be wrong about it though)

I have created a demo for it here, and the source code is here. It is on npm under the name ngxs-message-plugin

[mahmudabir]

Thank you, Can you suggest me a way to achieve my concern?

[Andreas-Hjortland]

You could perhaps do a combination of what I did in my plugin with the storage plugin... Save the state to local storage using the storage plugin, followed by broadcasting a message to every tab after the state is saved so that you could reload the state from every other tab, although I haven't tried it so the solution is copmletely theoretical

[mahmudabir]

Using the storage plugin saving the state into local Storage & get them in other tabs works automatically. But I purpose is to achieve the feature reactively, i.e., If I change a data into a tab it must reflect to other tabs as well. So how can I set the data of state to the store manually?

[Andreas-Hjortland]

Yeah, thats what I am not completely sure about... What I was thinking was to use the BroadcastChannel API to notify the other tabs whenever the state changes that it has changed and we have to reload the state from localStorage. I am not 100% sure how to do that though, and unfortunately I am not able to figure it out at the moment either. I hope it's enough of a starting point so that you might be able to find a solution though

[mahmudabir]

ok, that is one thing to implement. But can you please tell me how to set data in the store. I am able to get all data from localstorage reactively. But don't know how to set the data in a store. I searched for it. but could not get any solution.

[kuncevic]

@mahmudabir also check this discussion #793 it reference a blogpost that may help

[mahmudabir]

Thank you. I have solved this issue using fromEvent by Rxjs.

[dinbtechit]

@mahmudabir - It is causing an infinite loop situtation

Tab 1 updates the state, which in turn updates the local storage. This triggers a new event in Tab 2, causing the state to be updated and the storage to be updated as well. The process continues as new events are sent back and forth between the tabs.

How did you get around this?