fs-cache

What is fs-cache?

  • client-side key value store
  • localforage
  • namespacing
  • encryption
  • lifespan

localforage

  • localStorage-like api
  • namespacing

Storage Types

  • localStorage
  • websql
  • indexedDB
  • sessionStorage
  • memory

API/Usage

<link rel="import" href="../fs-cache/fs-cache.html">

<script>
  var storeName = 'persons';
  var _cache = FS.cache.instance({storeName});

  // indexedDB instance
  _cache.getItem('KWDY-6RW')
    .then(function(person){
      // do stuff
    });

  _cache.setItem('KWDY-6RW', {name: "Frank"})
    .then(function(person){
      // do stuff
    })
</script>

Config

{
  dbName: 'db', //first level namespace (default user's cisId)

  storeName: 'store', // second level namespace (please set this!)

  storeVersion: 3, // version of store

  type: 'local', //storage type (local|session|memory) default's to indexedDB

  lifetime: 'hour' // how long cache should live (hour|day|week|twoWeeks|month) or milliseconds
}

Instance API

var _cache = FS.cache.instance();

_cache.getItem()
_cache.setItem()
_cache.removeItem() 
_cache.clear() 
_cache.key() 
_cache.keys()
_cache.length()

_cache.getEncrypted()
_cache.setEncrypted()

FS.cache API

FS.cache.clearAll()
FS.cache.deleteAll()
FS.cache.deleteDB(dbName)

Components

<link rel="import" href="../fs-cache/fs-cache.html">
<link rel="import" href="../fs-cache/fs-cache-item.html">

<fs-cache store-name="demo" type="session" lifetime="day" cache="{{sessionDemoCache}}"></fs-cache>
<fs-cache store-name="demo" type="local" lifetime="60000" cache="{{localDemoCache}}"></fs-cache>
<fs-cache store-name="demo" type="memory" cache="{{memoryDemoCache}}"></fs-cache>


<!-- fs-cache-item double binding -->
<fs-cache store-name="demo" cache="{{demoCache}}"></fs-cache>
<fs-cache-item key="stuff" value="{{cacheValue}}" cache="[[demoCache]]" error="[[errorObj]]"></fs-cache-item>

Encryption

<link rel="import" href="../fs-cache/fs-crypto.html">
<link rel="import" href="../fs-cache/fs-cache.html">

<script>
  var storeName = 'persons';
  var _cache = FS.cache.instance({storeName});

  // indexedDB instance
  _cache.getEncrypted('KWDY-6RW')
    .then(function(person){
      // do stuff
    });

  _cache.setEncrypted('KWDY-6RW', {name: "Frank"})
    .then(function(person){
      // do stuff
    })
</script>

Demo

<!-- fs-demo or fs-crypto-mock must be loaded first -->
<link rel="import" href="../fs-demo/fs-demo.html">
<link rel="import" href="../fs-cache/fs-crypto-mock.html">

<link rel="import" href="../fs-element/fs-element-that-uses-fs-cache.html">


<fs-demo></fs-demo>
<fs-element-that-uses-fs-cache></fs-element-that-uses-fs-cache>

Tests

<!-- fs-crypto-mock must be loaded first -->
<link rel="import" href="../fs-cache/fs-crypto-mock.html">

<link rel="import" href="../fs-element/fs-element-that-uses-fs-cache.html">


<test-fixture id="fs-indicators-fixture">
  <template>
    <fs-element-that-uses-fs-cache language="en"></fs-element-that-uses-fs-cache>
  </template>
</test-fixture>

Encryption in Frontier

// app.js

let config = { 
  cacheEncryption: true, 
  experiments: experiments, 
  proxyUser: true 
}

var app = module.exports = snow(__dirname, hf, config);

fs-cache-service

client

cache

server

Render

Render

Usage

class PersonTimelineService {
  
  constructor () {
    this.timelineCache = FS.cache.instance({ storeName: 'fsPersonTimeline' });
    this.timelineCacheService = new FS.cache.service(this.timelineCache, true, true);
  }
  


  getTimeline (personId) {
    
    let {cachePromise, serverPromise} = this.timelineCacheService.conditionalGet(url, personId);
    
    let newServerPromise = serverPromise.then(data => {
      // do something special with server data
      return data;
    });

    let newCachePromise = cachePromise.then(data => {
      // do something special with cached data
      return data;
    });
    
    return {cachePromise: newCachePromise, serverPromise: newServerPromise};
  }  
}

Conditional Get Results

last 7 days

200: 56%  ~1GB

AVG Payload: ~2KB

Made with Slides.com