Create StorageMap#replace

[dev054]

• I have read all the library's documentation (README, CHANGELOG, MIGRATION and /docs)
• I understand I am writing to a human being, doing this open source project on his free time
• I will be involved in my own issue, by answering questions and informing if the issue is resolved

Configuration

• @ngx-pwa/local-storage version: 10.x
• Angular version (ng version): 10.x

Description of the issue

I have some options that are act like toggles... as for example, the user preferred menu style: collapsed or not and some others... and for this, I have to access the current value stored to mount the new value.

Now I'm doing it like this:

this.storageMap.get('key', schema).pipe(
  concatMap(currentValue =>
    this.storageMap.set('key', !currentValue, schema),
  ),
)

...but it could be a little verbose if we do it several times and that's why I'd like to propose something like this:

replace<T>(key: string, callback: (actual: T) => T, schema: JSONSchema)

... so we could use it this.storageMap.replace('key', actual => !actual, schema), for example... or do any other operation we could based on the current value.

---

Note that I'm unsure if it's on the scope of this project, but as I needed to solve this situation, I thought it was a good idea to post here.

[cyrilletuzi]

This is a common misconception, but client-side storage in general is just here to save some values for when the user leaves the application and when he/she comes back. But it should not replace your classic properties management, for many reasons:

• responsibility principle: it is 2 different responsibilities
• performance: even if this lib stores in indexedDb for better performances than localStorage, it is still heavier to access client-side storage than just a property of your classes
• possible errors: much more errors can happen when getting values stored (modified by a malicious user, deleted by the browser, blocked by enterprise security policies, etc.)

So it is not the role of client-side storage in general to do the replace. Your service should look like that:

@Injectable({
  providedIn: 'root',
})
export class PreferencesService {

  /* This property is still required */
  menuToggled = false;

  constructor(
    private storage: StorageMap,
  ) {

    this.storage.get('menuToggled', { type: 'boolean' }).subscribe((menuToggled) => {
      this.menuToggled = menuToggled ?? false;
    });

  }

  toggle(): void {

    this.menuToggled = !this.menuToggled;

    this.storage.set('menuToggled', this.menuToggled).subscribe();

  }

}