@maspav/browser-storage

Overview

@maspav/browser-storage is an Angular utility package designed to work seamlessly with Angular versions 14.2.0 and above. It provides browser storage functionalities with additional encryption and decryption capabilities using crypto-js.

Note: To fully leverage the capabilities of the maspav/browser-storage library, we highly recommend installing crypto-js.
This provides robust encryption and decryption, adding an essential layer of security to your stored data.

Installation

Installing the library using npm:

npm install @maspav/browser-storage

Methods

| Name | Description | |-------|-------------| | set | Stores the encrypted version of a key-value pair in localStorage. Requires key, data and secret as parameters. | | get | Retrieves and decrypts data from localStorage using the specified key and secret. | | clear | Clears data from localStorage. If a key is passed, the data stored against the key is cleared. If no key is passed, all data in the local storage are cleared. | | clearExcept | Clears all data except for the specified keys. Accepts an array of keys to retain. | | encrypt| Encrypts data using a specified secret. This method is utilised internally by set and get but can be used independently as well. | | decrypt | Decrypts data using the secret provided during encryption. This method is used internally by set and get but can also be used independently. |

Usage

Import the Package into Your Angular Module

After installation, import the utilities provided by the library into your Angular module as follows:

import { AppComponent } from "./app.component";
import { BrowserStorageModule } from '@maspav/browser-storage';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserStorageModule],
  bootstrap: [AppComponent]
})

export class AppModule {}

Note: You have the option to import BrowserStorageModule directly as shown above, or configure it with a secret key using the forRoot method, as demonstrated below:

import { AppComponent } from "./app.component";
import { BrowserStorageModule } from '@maspav/browser-storage';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserStorageModule.forRoot({ secret: 'mySecretKey' })],
  bootstrap: [AppComponent]
})

export class AppModule {}

Accessing the Package within Your Component

The example below demonstrates how to store and retrieve the details of a currently logged-in user. It also includes ways to encrypt and decrypt data for added security among other relevant methods.

test.component.ts

import { BehaviorSubject } from 'rxjs';
import { Component } from '@angular/core';
import { BrowserStorageService } from '@maspav/browser-storage';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})

export class TestComponent {
  text = "Hello World";
  secretKey = "mySecretKey";
  currentUser: any;

  constructor (public storageService: BrowserStorageService) {

    // `set` method example
    this.storageService.set('currentUser', { id: 1, name: 'John Doe' }, secretKey);

    // `get` method example
    this.currentUser = this.storageService.get('currentUser');

    // `clearExcept` method example
    this.storageService.clearExcept(['firstKey', 'secondKey']);
        
    // `clear with key` method example
    this.storageService.clear('firstKey');

    // `clear all` method example
    this.storageService.clear();

    // encrypt method example
    const encryptedText = this.storageService.encrypt(this.text, secretKey);

    // decrypt method example
    const decryptedText = this.storageService.decrypt(encryptedText, secretKey);
  }
}