Webstorage-decorators NPM

webstorage-decorators

TypeScript: Sync variables with localStorage

WebStorage-Decorators

About

Deprecated: Please use the replacement library var-persist.

WebStorage-Decorators is a library that adds property decorators to sync a class property with the local or session storage. It is useful for persisting state through reloads without making any changes to existing code.

This library has some caveats that var-persist rectifies:

Only supports decorators
Impure functions can make changes to data which do not get synced
Prototypes and functions are lost

Disclaimer: JavaScript's decorators are currently undergoing changes to the API overseen by TC39 and currently have no support for property decorators. Experimental decorators must be enabled to work properly.

Examples

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

export class MyCustomClass {
   @LocalStorage('light_theme', {key: 'site_theme'}) theme: string;
   @SessionStorage(null, {encryptWith: config.entryptionKey}) thisUser: User;
   @SessionStorage() searchBar: string;
    
   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, localStorage.getItem('user')); // Output: {first: 'John', last: 'Smith', ...}, **Some encrypted value**
   }
}

Built With

Setup

Prerequisites

Node.js

Instructions

Install persist: npm i webstorage-decorators
Enable decorators inside tsconfig.json:

{
	"compilerOptions": {
		"experimentalDecorators": true,
		...
	},
	...
}

Import & use, see examples above

Prerequisites

Node.js

Instructions

Install the dependencies: npm i
Build library & docs: npm build
Run unit tests: npm test

Documentation

Decorators

Decorator	Description
@LocalStorage(defaultValue: any, options: WebStorageOptions)	Syncs property to LocalStorage item under the same name
@SessionStorage(defaultValue: any, options: WebStorageOptions)	Syncs property to SessionStorage item under the same name