🔗 https://alobuuls.github.io/angular-localstorage-service/
Note
An Angular 16 application that implements a reusable LocalStorage service with configurable key prefixes and custom pipes.
The project demonstrates how to encapsulate browser storage operations behind reusable Angular services and modules, avoiding direct access to the Local Storage API while improving maintainability, scalability, and code organization.
Before running the project, make sure you have installed:
- 📦 Node.js:
v16.14.x – v18.x(recommended: v18 LTS) - 📦 npm:
v8+ 🅰️ Angular CLI:v16.x
nvm install 18
nvm use 18Run the following commands in your terminal:
node -v
npm -v
ng versiongit clone git@github.com:alobuuls/angular-localstorage-service.git
cd angular-localstorage-servicenpm installStart the development server:
ng serveThen open:
http://localhost:4200
The application follows a reusable architecture based on Angular services, modules, and custom pipes.
Responsible for:
- Saving values into Local Storage
- Retrieving stored values
- Removing stored values
- Managing configurable prefixes
- Preventing key collisions
Responsible for:
- Reading Local Storage values from templates
- Simplifying UI integration
- Improving template readability
Example:
{{ 'userName' | localstorage }}Responsible for:
- Centralizing storage configuration
- Registering providers
- Initializing storage settings
Responsible for:
- Demonstrating storage operations
- Consuming the storage service
- Testing persistence functionality
- 💾 Store data in Local Storage
- 🔍 Retrieve values through a custom pipe
- 🧹 Clear storage by prefix
- ⚙️ Configurable key prefixes
- 📦 Reusable LocalStorage Service
- 🔄 Custom Angular Pipe
- 🚀 APP_INITIALIZER Configuration
- ♻️ Encapsulated Browser Storage Access
| Technology | Purpose |
|---|---|
| Angular 16 | Front-End Framework |
| TypeScript | Application Logic |
| Local Storage API | Browser Persistence |
| Angular Services | Business Logic |
| Angular Pipes | Template Data Access |
| Angular Modules | Feature Organization |
| APP_INITIALIZER | Application Bootstrap Configuration |
angular-localstorage-service/
├── src/
│
├── app/
│ ├── localstorage/
│ │ └── localstorage.module.ts
│ │
│ ├── localstorage.service.ts
│ ├── localstorage.pipe.ts
│ │
│ ├── app.component.ts
│ ├── app.component.html
│ ├── app.component.css
│ └── app.module.ts
│
├── main.ts
├── styles.css
├── index.html
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md
- Service-based Architecture
- Separation of Concerns
- Encapsulation of Browser APIs
- Dependency Injection
- APP_INITIALIZER Configuration
- Reusable Angular Modules
- Custom Pipes
- Strong Typing with TypeScript
- Centralized Storage Management
- Clean Project Organization
- Scalable Front-End Design
Practice and strengthen Angular architecture concepts through the implementation of a reusable LocalStorage abstraction layer.
Key concepts covered:
- Angular Services
- Angular Pipes
- Angular Modules
- APP_INITIALIZER
- Local Storage API
- Dependency Injection
- Browser Data Persistence
- Reusable Architecture Patterns
- TypeScript Best Practices
- Front-End Application Design
This project is intended for educational and portfolio purposes.
Created by Alondra Francisco.