An observable browser storage service with encryption for Angular
npm install angular-browser-storagetypescript
import {BrowserStorageOptions, BrowserStorageService} from 'angular-browser-storage';
class Demo {
constructor(private storage: BrowserStorageService) {
// ...
}
}
`
Optionally, in your bootstrap class (example: app.component), configure the service:
`typescript
// options: BrowserStorageOptions
this.storage.configure(options);
`
Options are the following:
default:
The default browser storage type (local storage or session storage), the default value is 'local'. Possible values are 'local' or 'session'
salt:
A salt string to encrypt storage variables. It is highly recommended to use your own salt, however, a salt will be provided by default.
obfuscate:
A boolean that indicate if variable should be encrypted or not. By default, the value is false and the storage is not encrypted. It is recommended to use true in production mode. You should never store sensible information in the browser storage, be aware that client side is never safe.
Data manipulations
$3
Using the default storage type:
`typescript
this.storage.set('key', 'value');
`
You can optionally use another storage type:
`typescript
this.storage.set('key', 'value', 'session');
this.storage.set('key', 'value', 'local');
`
Value as object will be automatically serialized to JSON.
$3
Using the default storage type:
`typescript
const key:string = this.storage.get('key');
const user:User = this.storage.get('user');
const user = this.storage.getTyped('user');
`
You can optionally use another storage type:
`typescript
const key:string = this.storage.get('key', 'session');
const user:User = this.storage.get('user', 'session');
const user = this.storage.getTyped('user', 'session');
`
Value will be automatically un-serialized to object.
$3
Using the default storage type:
`typescript
const keys = this.storage.keys();
`
You can optionally use another storage type:
`typescript
const keys = this.storage.keys('session');
`
$3
Using the default storage type:
`typescript
this.storage.remove('key');
`
You can optionally use another storage type:
`typescript
this.storage.remove('key', 'session');
`
You can clear all variable of the default storage:
`typescript
this.storage.clear();
`
Or, you can clear all variable of a specified storage:
`typescript
this.storage.clear('session');
`
$3
Using the default storage type:
`typescript
if (this.storage.has('key')){
console.log('The default storage has the variable "key".');
}else{
console.log('The default storage has no variable "key".');
}
`
You can optionally use another storage type:
`typescript
if (this.storage.has('key', 'session')){
console.log('The session storage has the variable "key".');
}else{
console.log('The session storage has no variable "key".');
}
`
$3
You can subscribe to any variable using an observer.
`typescript
ngOnInit() {
this.subscription: Observer = this.storage.getObserver('key').subscribe((key) => {
// use the key ...
});
this.storage.trigger('key');
}
`
You can use the trigger function to trigger an observer. It's useful to detect variable after the page has been loaded.
$3
If you prefer, instead of using 'local' or 'session' for Browser Storage Types, you can use the following constants:
Example:
`typescript
import {BrowserStorageService, BROWSER_STORAGE_TYPE_LOCAL, BROWSER_STORAGE_TYPE_SESSION} from 'angular-browser-storage';
// ...
this.storage.remove('key', BROWSER_STORAGE_TYPE_LOCAL);
this.storage.remove('key', BROWSER_STORAGE_TYPE_SESSION);
``