Nouveau projet stable : OhMyCache

OhMyCache ?

OhMyCache est une librairie basée sur les API LocalStorage et SessionStorage qui vous permet de stocker facilement sur le navigateur du client n’importe quel type de données (string, int, array, objets…).

De plus il est possible d’enregistrer des données temporaire ou encore en lecture seule.

Techniquement c’est comment ?

J’ai créé le projet grâce à webpack, on a donc du ECMAScript 2015, du ESLint tout ça pour finir avec une librairie UMD.

La librairie n’utilise aucune dépendance externe, elle est compatible avec les navigateurs possédant les API LocalStorage et SessionStorage (soit IE 8+, Chrome, Firefox…).

Enfin la librairie est testé grâce à Jasmine.

Je la trouve où cette librairie ?

Les sources sont sur github et le projet peut être installé avec npm ou bower.

La documentation est, elle, accessible ici.

Une petite démo ?

Bien sûr, même plusieurs vu qu’on peut importer la librairie avec import, require ou à l’ancienne via la balise <script>.

ECMAScipt 2015

L’avantage de cette technique est que vous pouvez importer seulement la classe dont vous avez besoin. En effet si vous n’utilisez que le LocalStorage vous allez importer la classe Local et non la classe Session.

import {Local, Session} from 'OhMyCache'

// Je crée un nouvel item dans le cache Local

Local.set('prenom', 'Jean')

// Je crée un nouvel item dans le cache de Session

Session.set('prenom', 'Alain')

// Maintenant on va lire les données

Local.get('prenom') // Jean

Session.get('prenom') // Alain

Require

La même chose avec require()

var OhMyCache = require('OhMyCache')

// Je crée un nouvel item dans le cache Local

OhMyCache.Local.set('prenom', 'Jean')

// Je crée un nouvel item dans le cache de Session

OhMyCache.Session.set('prenom', 'Alain')

// Maintenant on va lire les données

OhMyCache.Local.get('prenom') // Jean

OhMyCache.Session.get('prenom') // Alain

Script

Et enfin à l’ancienne

<html>
  <head>
    <!-- si installé via npm -->
    <script src="node_modules/ohmycache/dist/bundle.js"></script>

    <!-- si installé via bower -->
    <script src="bower_components//ohmycache/dist/bundle.js"></script>

    <!-- si installé à l'arrache -->
    <script src="lib-path/ohmycache/dist/bundle.js"></script>
    <script>
    // Je crée un nouvel item dans le cache Local

    OhMyCache.Local.set('prenom', 'Jean')

    // Je crée un nouvel item dans le cache de Session

    OhMyCache.Session.set('prenom', 'Alain')

    // Maintenant on va lire les données

    OhMyCache.Local.get('prenom') // Jean

    OhMyCache.Session.get('prenom') // Alain

    </script>
  </head>
</html>

Et c’est tout ?

Je vous rassure on peut faire beaucoup plus.

// On peut stocker des objets

OhMyCache.Local.set('user', {prenom: 'Jean', nom: 'Bon'})

// On peut faire expirer des données

OhMyCache.Local.set('token', 'token_securise', {expire: 3600}) // Notre token expirera dans 1 heure


// On peut aussi insérer des données en lecture seule

OhMyCache.Local.set('equipe_prefere', 'OM', {readonly: true}) // return true

OhMyCache.Local.set('equipe_prefere', 'PSG') // return false (en même temps ça devrait être interdit...)

OhMyCache.Local.get('equipe_prefere') // return 'OM'

OhMyCache.Local.remove('equipe_prefere') // return false

OhMyCache.Local.get('equipe_prefere') // return 'OM'

What else

Le projet n’en est qu’à son début mais fonctionne bien (je l’utilise sur divers projets) mais je serais ravis d’avoir vos retours et idées d’amélioration. J’ai vraiment voulu faire une librairie simple d’utilisation et la plus respectueuse des bonnes pratiques possible.

[js] OhMyCache

OhMyCache est une librairie basée sur les api LocalStorage et SessionStorage qui vous permet de stocker facilement sur le navigateur du client n'importe quel type de données (string, int, array, objets...)