Member-only story
Angular: Observe change in local storage value. (Asynchronous)
Async local storage value with local storage module using localStorage and IndexedDB API.
My articles are open for everyone; non-member readers can read the article by clicking this Friend link.
We can use the JavaScript native APIs:
The localStorage API is simple to use but synchronous. So if we use it too often in an app, our app will soon start to freeze.
IndexedDB API is asynchronous, so efficient, but it’s a mess to use: you’ll soon fall in the callback hell, as it works with a ton of old events listeners (not use Promises yet).
Mozilla did a great job with localForage: an easy-to-use API, similar to native localStorage, but internally saving data asynchronously via IndexedDB. But it’s written in ES5, so it’s difficult to implement it in Angular.
Here comes our ngx-pwa/local-storage module: same idea as localForage, but in ES6/ES2015, and wrapped in RxJS observables, to be coherent with other Angular modules.
Getting startard with ngx-pwa/local-storage
With Angular ≥6, install via npm:
# For Angular 8 & 9: