webstorage-decorators

TypeScript: Sync variables with localStorage

---

Release Notes • Report a Bug • Request a Feature

---

Table of Contents

• 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

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

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

3. Import & use, see examples above

Development

Prerequisites

• Node.js

Instructions

1. Install the dependencies: npm i
2. Build library & docs: npm build
3. 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

Copyright © 2023 Zakary Timson | Available under MIT Licensing

See the license for more information.