### webstorage-decorators
TypeScript: Sync variables with localStorage
[](https://git.zakscode.com/ztimson/webstorage-decorators/tags)
[](https://git.zakscode.com/ztimson/webstorage-decorators/pulls)
[](https://git.zakscode.com/ztimson/webstorage-decorators/issues)
---
---
## Table of Contents
- [WebStorage-Decorators](#top)
- [About](#about)
- [Examples](#examples)
- [Built With](#built-with)
- [Setup](#setup)
- [Production](#production)
- [Development](#development)
- [Documentation](#documentation)
- [Decorators](#decorators)
- [WebStorageOptions](#webstorageoptions)
- [License](#license)
## About
**Deprecated:** Please use the replacement library [var-persist](https://git.zakscode.com/ztimson/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](https://git.zakscode.com/ztimson/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](https://tc39.es) and currently have no support for property decorators. [Experimental decorators](https://www.typescriptlang.org/tsconfig#experimentalDecorators) must be enabled to work properly.
### Examples
```typescript
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
[](https://typescriptlang.org/)
## Setup