ng4-cache

use
npm i --save-dev ng4_cache@0.0.30.

By default service store data in session storage, you could select one of storages:

session storage
local storage
memory

If current storage is not available - service will choose memory storage as fallback mechanism.

User can set the xipre period of the cached object as follows:
//put some data to cache for 5 minutes (maxAge - in seconds)
this._cacheService.set('key', ['some data'], {maxAge: 5 * 60});

It supports Cached method decorator.
Cached method decorator allows you to cache the an entire method (with less amount of code, as well as without injecting the CacheService), by putting the return value to CACHE on the first execution, and retrieve it from CACHE on the further executions.
Cached method has one parameter:

key: string : obviously used as a key when putting/getting the method's value.

CacheKey parameter decorator

You can place CacheKey parameter decorator just before the parameter, and its value will be appended to the cache key.

The following example shows simple usage of the Cached and CacheKey decorators.

Exmaple usage.

import {Component, provide} from 'angular2/core';
import {CacheService, CacheStorageAbstract, CacheLocalStorage} from 'ng2-cache/ng2-cache';

@Component({
selector: 'some-selector',
template: '

',
providers: [
CacheService,
{provide: CacheStorageAbstract, useClass:CacheLocalStorage}
]
})

TO set a global prefix with your cashkey , follow below exmaple
@Component({
selector: 'some-selector',
template: '

',
providers: [
CacheService,
{provide: CacheStorageAbstract, useClass:CacheLocalStorage},
{provide:"GLOBAL_CACHE_PREFIX", useValue:"AIR"}
]
})
or in module , you can configure as follows.
@NgModule({
declarations: [
AppComponent,
AutoFilComponent

],
imports: [
BrowserModule,
HttpClientModule,
HttpWrapperModule.forRoot('http://localhost:3000','SESSION_TOKEN')
],
providers: [ DataService, {provide:"GLOBAL_CACHE_PREFIX", useValue:"AIR"}, {provide: CacheStorageAbstract, useClass:CacheLocalStorage} ,
CacheService
],
bootstrap: [AppComponent]
})
export class AppModule { }.

Diffrent way to set cache and global prefix .

import {Component} from '@angular/core';
import {CacheService, CacheStoragesEnum} from 'ng2-cache/ng2-cache';

declare var BUILD_VERSION: string;

@Component({
selector: 'some-selector',
template: '

',
providers: [ CacheService ]
})
export class ExampleComponent {

constructor(private _cacheService: CacheService) {}

public func() {

//set global prefix as build version
this._cacheService.setGlobalPrefix(BUILD_VERSION);

//put some data to cache "forever"
//returns true is data was cached successfully, otherwise - false
let result: boolean = this._cacheService.set('key', ['some data']);

//put some data to cache for 5 minutes (maxAge - in seconds)
this._cacheService.set('key', ['some data'], {maxAge: 5 * 60});

//put some data to cache for 1 hour (expires - timestamp with milliseconds)
this._cacheService.set('key', {'some': 'data'}, {expires: Date.now() + 1000 60 60});

//put some data to cache with tag "tag"
this._cacheService.set('key', 'some data', {tag: 'tag'});

//get some data by key, null - if there is no data or data has expired
let data: any|null = this._cacheService.get('key');

//check if data exists in cache
let exists: boolean = this._cacheService.exists('key');

//remove all data from cache with tag "tag"
this._cacheService.removeTag('tag');

//remove all from cache
this._cacheService.removeAll();

//get all data related to tag "tag" :
// {'key' => 'key data', ...}
this._cacheService.getTagData('tag');

//change storage (returns new instance of service with needed storage)
this._cacheService.useStorage(CacheStoragesEnum.LOCAL_STORAGE);

}
}

Use Decorators for caching methode return value.

To enable experimental support for decorators, you must enable the experimentalDecorators compiler option in your tsconfig.json:
tsconfig.json

{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}

cached method decorator

The following example shows simple usage of the Cached and CacheKey decorators.

anyclass.ts

...
import { Cached, CacheKey } from '@ngx-cache/core';

export class AnyClass {
// will retrieve 'some string value'
@Cached('some-string')
getSomeStringValue(): string {
return 'some string value';
}

@Cached('some-string')
getSomeStringValue2(@CacheKey param1: string): string {
return 'some string value: ' + param1;
}
}

...
// these are the first executions
console.log(anyClass.getSomeStringValue2('p1'));
console.log(anyClass.getSomeStringValue2('p2'));
...
// will retrieve 'some string value: p1' from CACHE
console.log(anyClass.getSomeStringValue2('p1'));

// will retrieve 'some string value: p1' from CACHE
console.log(anyClass.getSomeStringValue2('p2'));