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: '

Template

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

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

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: '

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'));