@maspav/browser-storage v1.1.1

@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

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);
  }
}