Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@ngx-pwa/local-storage
Advanced tools
Efficient local storage module for Angular apps and PWA: simple API based on native localStorage API, but internally stored via the asynchronous IndexedDB API for performance, and wrapped in RxJS observables to be homogeneous with other Angular modules.
Efficient local storage module for Angular apps and Progressive Wep apps (PWA):
localStorage
API and automatic JSON stringify/parse,IndexedDB
API,Observables
,For now, Angular does not provide a local storage module, and almost every app needs some local storage. There are 2 native JavaScript APIs available:
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 in ES6 and additionally wrapped into RxJS Observables to be homogeneous with other Angular modules.
Install the same version as your Angular one via npm:
# For Angular 7:
npm install @ngx-pwa/local-storage@7
# For Angular 6:
npm install @ngx-pwa/local-storage@6
# For Angular 5:
npm install @ngx-pwa/local-storage@5
Now you just have to inject the service where you need it:
import { LocalStorage } from '@ngx-pwa/local-storage';
@Injectable()
export class YourService {
constructor(protected localStorage: LocalStorage) {}
}
Versions 4 & 5 (only) need an additional setup step explained in the old module guide.
If you still use the old angular-async-local-storage
package, or to update to versions 6 and 7,
see the migration guides.
The API follows the native localStorage API, except it's asynchronous via RxJS Observables.
let user: User = { firstName: 'Henri', lastName: 'Bergson' };
this.localStorage.setItem('user', user).subscribe(() => {});
You can store any value, without worrying about stringifying.
To delete one item:
this.localStorage.removeItem('user').subscribe(() => {});
To delete all items:
this.localStorage.clear().subscribe(() => {});
this.localStorage.getItem<User>('user').subscribe((user) => {
user.firstName; // should be 'Henri'
});
As any data can be stored, you can type your data.
Not finding an item is not an error, it succeeds but returns null
.
this.localStorage.getItem('notexisting').subscribe((data) => {
data; // null
});
Don't forget it's client-side storage: always check the data, as it could have been forged or deleted.
Starting with version 5, you can use a JSON Schema to validate the data.
Starting with version 7, validation is now required. A migration guide is available.
this.localStorage.getItem<string>('test', { schema: { type: 'string' } })
.subscribe((user) => {
// Called if data is valid or null
}, (error) => {
// Called if data is invalid
});
See the full validation guide to see how to validate all common scenarios.
You DO NOT need to unsubscribe: the observable autocompletes (like in the HttpClient
service).
But you DO need to subscribe, even if you don't have something specific to do after writing in local storage (because it's how RxJS Observables work).
Since version 5.2, you can use these methods to auto-subscribe:
this.localStorage.setItemSubscribe('user', user);
this.localStorage.removeItemSubscribe('user');
this.localStorage.clearSubscribe();
Use these methods only if these conditions are fulfilled:
Map
-like operationsStarting with version >= 7.1, in addition to the classic localStorage
-like API,
this lib also provides some Map
-like methods for advanced operations:
.keys()
method.has(key)
method.size
propertySee the documentation for more info and some recipes.
If you have multiple apps on the same subdomain and you don't want to share data between them, see the prefix guide.
this.localStorage.setItem('color', 'red').subscribe(() => {
// Done
}, () => {
// Error
});
This lib major version is aligned to the major version of Angular. Meaning for Angular 5 you need version 5, for Angular 6 you need version 6, for Angular 7 you need version 7, and so on.
We follow Angular LTS support, meaning we support Angular 5 minimum, until May 2019.
This module supports AoT pre-compiling.
This module supports Universal server-side rendering via a mock storage.
All browsers supporting IndexedDB, ie. all current browsers : Firefox, Chrome, Opera, Safari, Edge, and IE10+.
See the browsers support guide for more details and special cases (like private browsing).
Changelog available here, and migration guides here.
MIT
7.1.0 (2018-11-23) & 7.1.1 (2018-11-26)
These releases have been deprecated due to a critical regression.
FAQs
Efficient local storage module for Angular: simple API based on native localStorage API, but internally stored via the asynchronous IndexedDB API for performance, and wrapped in RxJS observables to be homogeneous with other Angular modules.
The npm package @ngx-pwa/local-storage receives a total of 14,849 weekly downloads. As such, @ngx-pwa/local-storage popularity was classified as popular.
We found that @ngx-pwa/local-storage demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.