Zakary Timson

Repositories

34

Projects Packages Public Activity Starred Repositories

webstorage-decorators (4.3.1)

Published 2024-01-07 19:17:32 -05:00 by ztimson in ztimson/webstorage-decorators

Installation

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install webstorage-decorators@4.3.1

or add it to the package.json file:

"webstorage-decorators": "4.3.1"

For more information on the npm registry, see the documentation.

About this package

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.

Dependencies

Development Dependencies

ID	Version
@types/jest	^29.5.11
jest	^29.7.0
jest-junit	^16.0.0
ts-jest	^29.1.1
typescript	^5.0.4

Keywords

Decorators LocalStorage SessionStorage WebStorage

Details

npm

ztimson/webstorage-decorators

2024-01-07 19:17:32 -05:00

21

Zak Timson

MIT

latest

4.6 KiB

Assets (1)

webstorage-decorators-4.3.1.tgz 4.6 KiB

Versions (1) View all

4.3.1 2024-01-07

Issues