Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/nodejs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ jobs:

strategy:
matrix:
node-version: [18.x, 20.x]
node-version: [18.x, 20.x, 22.x]

steps:
- uses: actions/checkout@v2
Expand Down
70 changes: 46 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,60 @@
# Angular Storage
### Decorators and services for cookies, session- and localStorage
This library adds decorators that make it super easy to *automagically* save and restore variables using HTML5's `localStorage` and `sessionStorage`. It also provides Angular-Injectable Session- and LocalStorageService.

## Decorators and services for cookies, session- and localStorage

This library adds decorators that make it super easy to *automagically* save and restore variables using HTML5's `localStorage` and `sessionStorage`. It also provides Angular-Injectable Session- and LocalStorageService.

## What's included?

- Decorator functions that are pretty easy to use and configure (see [Decorators config](#decorators-config)):
+ `@LocalStorage()` - to save variable in HTML5 localStorage
+ `@SessionStorage()` - to save variable in HTML5 sessionStorage
+ `@CookieStorage()` - to save variable as a cookie
+ `@SharedStorage()` - to keep variable in temporary memory that can be shared across classes
+ `@TempStorage()` - alias for `SharedStorage`
- `@LocalStorage()` - to save variable in HTML5 localStorage
- `@SessionStorage()` - to save variable in HTML5 sessionStorage
- `@CookieStorage()` - to save variable as a cookie
- `@SharedStorage()` - to keep variable in temporary memory that can be shared across classes
- `@TempStorage()` - alias for `SharedStorage`
- Injectable `LocalStorageService`, `SessionStorageService`, `CookiesStorageService` and `SharedStorageService` ([read more here](src/service#angular-storage))
- Possibility of [listening to storage changes](https://github.com/zoomsphere/ngx-store/tree/master/src/service#listening-to-changes)
- Easy configuration (see [#configuration](#configuration) section)
- Compatibility with:
+ all previous versions
+ Angular AoT compiler
+ `angular2-localstorage`
+ [nativescript-localstorage](https://github.com/NathanaelA/nativescript-localstorage)
+ Angular v2, 4 and 5
+ your own project!
- all previous versions
- Angular AoT compiler
- `angular2-localstorage`
- [nativescript-localstorage](https://github.com/NathanaelA/nativescript-localstorage)
- Angular v2, 4 and 5
- your own project!
- Tests coverage

## CHANGELOG
### CHANGELOG

#### v8.0.0 - support for Angular 17

#### v7.0.0 - support for Angular 16

#### v6.0.0 - support for Angular 15

#### v4.0.0 - support for Angular 10

#### v3.0.0 - support for Angular 9

Version from Zoomsphere

#### v2.1.0 - support for Angular 7 & TypeScript 3

#### v2.0.0 - support for Angular 6 (RxJS v6)

#### v1.4.x

- standardized behavior for:
- more than 1 decorator, e.g. in `@LocalStorage() @CookieStorage() variable: any;` `CookieStorage` (decorator closer to variable) has higher priority, hence the value will be read from cookies only. The cookie value will be saved in `localStorage` regardless of its content to keep consistency.
- `WebStorageService.clear('all')` - now will remove everything except `ngx-store`'s config (stored in `localStorage`)
- more than 1 decorator, e.g. in `@LocalStorage() @CookieStorage() variable: any;` `CookieStorage` (decorator closer to variable) has higher priority, hence the value will be read from cookies only. The cookie value will be saved in `localStorage` regardless of its content to keep consistency.
- `WebStorageService.clear('all')` - now will remove everything except `ngx-store`'s config (stored in `localStorage`)
- removed deprecated (since v0.5) `WEBSTORAGE_CONFIG`
- `@SharedStorage` has now alias `@TempStorage`
- introduced [builder pattern](https://github.com/zoomsphere/ngx-store/tree/master/src/service#builder-pattern)
- added unit tests coverage
- fixes for storage events


## Upcoming (TODO)

- Storage events for keys removed from outside
- Tests for storage events (accepting PRs)
- Accepting Moment's instances as expiration date (accepting PRs)
Expand All @@ -54,10 +64,11 @@ Version from Zoomsphere
- Take configuration from [npm config](https://www.npmjs.com/package/config)'s file (?)
- Automatically handle all data manipulations using [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) (ES6)


## Installation

1. Download the library: `npm i ngx-store --save` or `npm i ngx-store@RC` for latest version
2. Import the WebStorageModule in your `app.module.ts`:

```typescript
import { NgModule } from '@angular/core';
import { WebStorageModule } from 'ngx-store';
Expand All @@ -70,22 +81,25 @@ Version from Zoomsphere
export class AppModule {}
```


## Configuration

Things you should take into consideration while configuring this module:

- Decorated objects have added `.save()` method to easily force save of made changes (configurable by `mutateObjects`)
- Support for all `Array` methods that change array object's value can be disabled (configurable by `mutateObjects`)
- Object mutation can be troublesome for object comparisons, so you can configure this feature for single field passing [decorator config](#decorators-config)
- You may not use prefix (by setting it to `''`), however we recommend to use it, as it helps avoid conflicts with other libraries (configurable by `prefix`)
- There are 3 ways to clear ngx-stored data:
+ `'all'` - completely clears current Storage
+ `'prefix'` - removes all variables prefixed by ngx-store
+ `'decorators'` - removes only variables created by decorating functions (useful when not using prefix)
- `'all'` - completely clears current Storage
- `'prefix'` - removes all variables prefixed by ngx-store
- `'decorators'` - removes only variables created by decorating functions (useful when not using prefix)
Default behaviour is specified by setting `clearType`, but it's possible to pass this parameter directly into service `clear()` method.
- Examples for `cookiesScope` can be found in [this comment](https://github.com/zoomsphere/ngx-store/blob/master/src/utility/storage/cookies-storage.ts#L125)

As this project uses decorating functions, it is important to provide custom configuration in global variable named `NGXSTORE_CONFIG` before Angular application load. Here are some ways to do it:

1. Add `<script>` in `index.html` (before Angular sources)

```html
<script>
var NGXSTORE_CONFIG = {
Expand All @@ -99,7 +113,9 @@ As this project uses decorating functions, it is important to provide custom con
};
</script>
```

2. If you use webpack, you can provide global variable in your `webpack.js` file this way:

```javascript
plugins: [
new webpack.DefinePlugin({
Expand All @@ -110,16 +126,18 @@ As this project uses decorating functions, it is important to provide custom con
]
```


## Decorators config

Decorating functions can take config object with the following fields:

- `key: string` - key under the variable will be stored, default key is the variable name
- `mutate: boolean` - enable or disable object mutation for instance, default depends on global config
- `expires: Date` - for `@CookieStorage()` only, specifies expiration date, null = lifetime cookie


## Usage

1. Pretty easy to use decorators. Here is where the real magic happens.

```typescript
import { CookieStorage, LocalStorage, SessionStorage } from 'ngx-store';

Expand Down Expand Up @@ -148,6 +166,7 @@ Decorating functions can take config object with the following fields:
```

**Sharing variables across classes:** Decorated variables can be easily shared across different classes, e.g. Angular Components (also after their destruction) without need to create new service for this purpose.

```typescript
import { LocalStorage, SharedStorage } from 'ngx-store';

Expand Down Expand Up @@ -175,6 +194,7 @@ Decorating functions can take config object with the following fields:
```

**Force save changes:** If you need to modify stored object by not a direct assignment, then you can take advantage of `.save()` method to force save made changes. Example:

```typescript
import { CookieStorage, LocalStorage, SessionStorage, WebstorableArray } from 'ngx-store';

Expand All @@ -201,6 +221,7 @@ Decorating functions can take config object with the following fields:
```

**Limited lifecycle classes in AoT compilation:** There is a special case when Service or Component in your application containing decorated variable is being destroyed:

```typescript
import { OnDestroy } from '@angular/core';
import { LocalStorage } from 'ngx-store';
Expand All @@ -213,6 +234,7 @@ Decorating functions can take config object with the following fields:
```

2. Use the [services](src/service#angular-storage) to manage your data:

```typescript
import { CookiesStorageService, LocalStorageService, SessionStorageService, SharedStorageService } from 'ngx-store';

Expand Down
63 changes: 32 additions & 31 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"lodash.set": "^4.3.2",
"rxjs": "^7.8.1",
"ts-debug": "^1.3.0",
"tslib": "^2.6.2",
"tslib": "^2.8.1",
"zone.js": "^0.15.0"
},
"devDependencies": {
Expand All @@ -63,7 +63,7 @@
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.merge": "^4.6.9",
"@types/lodash.set": "^4.3.9",
"@types/node": "^20.10.3",
"@types/node": "^22.10.5",
"codelyzer": "^6.0.2",
"jasmine-core": "^4.6.0",
"jasmine-spec-reporter": "^7.0.0",
Expand All @@ -73,13 +73,13 @@
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"ng-packagr": "^19.0.1",
"ts-node": "^10.9.1",
"ts-node": "^10.9.2",
"tslint": "^6.1.3",
"typescript": "^5.6.3"
},
"//": "\"engineStrict\": false,",
"engines": {
"node": ">= 18",
"node": ">= 18.19.1",
"npm": ">= 8"
}
}
4 changes: 2 additions & 2 deletions projects/ngx-store/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"access": "public"
},
"peerDependencies": {
"@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
"@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0",
"@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"dependencies": {
"lodash.get": "^4.4.2",
Expand Down