WebStorage Decorators

A Javascript library that adds property decorators to sync a class property with the local or session storage.

Quick Setup

1. Install with: npm install --save webstorage-decorators
2. Add the decorator to your property and use as normal!

import {LocalStorage, SessionStorage} from 'webstorage-decorators';

export class MyCustomClass {
    @LocalStorage({key: 'site_theme', default: 'light_theme'}) theme: string;
    @SessionStorage({encryptWith: config.entryptionKey}) thisUser: User;
    
    constructor() {
       console.log(this.theme, localStorage.getItem('theme')); // Output: 'light_theme', 'light_theme'
       console.log(this.user, localStorage.getItem('user')); // Output: null, undefined
       user = {first: 'John', last: 'Smith', ...}
       console.log(this.user, this.user == localStorage.getItem('user')); // Output: {first: 'John', last: 'Smith', ...}, true
   }
}

Caveats

Custom Functions

You can technically store anything inside local/session storage however everything is serialized using javascript's JSON, so any prototypes will be stripped causing you to lose any extra functions you may have defined on your class. However if you provide a default value,

Impure Functions

Impure functions don't use the Object's setter preventing the storage from being updated. To prevent this use a pure function or save it manually by reading the variable. (Reading triggers change detection & save if there are differences)

@LocalStorage([1, 2]) example: number[];
example.push(3) // Impure & won't update storage
console.log(localStorage.getItem('example')) // Output: [1, 2];
example; // Trigger save
console.log(localStorage.getItem('example')) // Output: [1, 2, 3];

// OR

example = example.concat([3]); // Pure function requires you to use the setter triggering automatic saving