Angular @ngx-pwa/local-storage is not working

I am trying to store data in the browser's local storage using @ngx-pwa/local-storage as it provides additional RxJs operators on top of regular/common local storage.

versions

        "@angular/core": "^6.1.0",
        "@ngx-pwa/local-storage": "^6.2.4"

component/service:

       constructor(private storage: LocalStorage) {}
         /// *** /////

        const user: User = { firstName: 'lorem', lastName: 'ipsum' };
        this.storage.setItem('user', user).subscribe(() => {});

In the browser's Application/Local Storage => data is empty.

@ngx-pwa/local-storage uses indexedDB internally to make the operations asynchronous.

Therefore, when you perform asynchronous storing operations, it is stored in indexedDB. So you should check the corresponding tab:

Application -> IndexedDB -> ngStorage -> localStorage

Note that this path could change based on configurations

From official docs:

The localStorage API is simple to use but synchronous, so if you use it too often, your app will soon begin to freeze.

The indexedDB API is asynchronous and efficient, but it's a mess to use: you'll soon be caught by the callback hell, as it does not support Promises yet.

Mozilla has done a very great job with the localForage library: a simple API based on native localStorage, but internally stored via the asynchronous indexedDB for performance. But it's built in ES5 old school way and then it's a mess to include into Angular.

This module is based on the same idea as localForage, but built in ES6+ and additionally wrapped into RxJS Observables to be homogeneous with other Angular modules.