webstorage-decorators

TypeScript: Sync variables with localStorage

Release Notes • Report a Bug • Request a Feature

WebStorage-Decorators
- About
  - Examples
  - Built With
- Setup
  - Production
  - Development
- Documentation
  - Decorators
  - WebStorageOptions
- License

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
[Proto]types 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

Production

Prerequisites

Node.js

Instructions

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

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

Import & use, see examples above

Development

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

WebStorageOptions

Options	Description
default	Default value, same as decorator's first argument
key	Key to reference value inside local/session storage (Defaults to the property name)

License

See the license for more information.

webstorage-decorators