![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@ngx-pwa/local-storage
Advanced tools
Changelog
5.1.0 and 4.1.0 (2018-04-07)
AsyncLocalStorageModule
deprecated (but still working). Renamed to LocalStorageModule
AsyncLocalStorage
deprecated (but still working). Renamed to LocalStorage
AsyncLocalDatabase
deprecated (but still working). Renamed to LocalDatabase
ALSGetItemOptions
deprecated (but still working). Renamed to LSGetItemOptions
See the migration guides.
Readme
Efficient local storage module for Angular apps and Progressive Wep apps (PWA):
localStorage
API and automatic JSON stringify/parse,IndexedDB
API,Observables
,You could also be interested by @ngx-pwa/offline.
The author of this library organizes Angular courses (based in Paris, France, but open to travel). You can find my bio here (in English) and course details here (in French).
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/ES2015 and additionally wrapped into RxJS Observables to be homogeneous with other Angular modules.
If you already use the previous angular-async-local-storage
package, see the migration guide.
Install the same version as your Angular one via npm:
# For Angular 5 (latest):
npm install @ngx-pwa/local-storage
# For Angular 4 (and TypeScript >= 2.3):
npm install @ngx-pwa/local-storage@4
Then include the LocalStorage
module in your app root module (just once, do NOT re-import it in your submodules).
import { LocalStorageModule } from '@ngx-pwa/local-storage';
@NgModule({
imports: [
BrowserModule,
LocalStorageModule,
...
]
...
})
export class AppModule {}
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) {}
}
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.
Don't forget it's client-side storage: always check the data, as it could have been forged or deleted.
null
.this.localStorage.getItem('notexisting').subscribe((data) => {
data; // null
});
this.localStorage.setItem('color', 'red').subscribe(() => {
// Done
}, () => {
// Error
});
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).
You do NOT need to unsubscribe: the observable autocompletes (like in the HttpClient
service).
When reading data, you'll only get one value: the observable is here for asynchronicity but is not meant to emit again when the stored data is changed. And it's normal: if app data change, it's the role of your app to keep track of it, not of this lib. See #16 for more context and #4 for an example.
This lib major version is aligned to the major version of Angular. Meaning for Angular 4 you need version 4, for Angular 5 you need version 5, and so on.
We follow Angular LTS support, meaning we support Angular 4 minimum, until October 2018.
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+.
Local storage is required only for apps, and given that you won't do an app in older browsers, current browsers support is far enough.
Even so, IE9 is supported but use native localStorage as a fallback, so internal operations are synchronous (the public API remains asynchronous-like).
This module is not impacted by IE/Edge missing IndexedDB features.
It also works in tools based on browser engines (like Electron) but not in non-browser tools (like NativeScript, see #11).
Be aware that local storage is limited in browsers when in private / incognito modes. Most browsers will delete the data when the private browsing session ends. It's not a real issue as local storage is useful for apps, and apps should not be in private mode.
In IE / Edge, indexedDB
is null
when in private mode. The lib fallbacks to (synchronous) localStorage
.
In Firefox, indexedDB
API is available in code but throwing error on usage. It's a bug in the browser, this lib can't handle it, see
#26.
MIT
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 11,162 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.