TypeScript: Sync variables with localStorage https://www.npmjs.com/package/webstorage-decorators
Go to file
2021-01-28 13:15:46 -05:00
lib Updated to 3.0 2021-01-28 13:15:46 -05:00
src Updated to 3.0 2021-01-28 13:15:46 -05:00
tests Updated to 3.0 2021-01-28 13:15:46 -05:00
.gitignore Updated to 2.0 2021-01-28 10:24:11 -05:00
index.ts Init 2018-05-03 15:07:59 -04:00
jest.config.js Updated to 2.0 2021-01-28 10:24:11 -05:00
package.json Updated to 3.0 2021-01-28 13:15:46 -05:00
README.md Updated to 3.0 2021-01-28 13:15:46 -05:00
tsconfig.json Updated to 2.0 2021-01-28 10:24:11 -05:00

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

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