Lab 3 - Ionic Storage Demo

An Ionic Angular application demonstrating local data persistence using Ionic Storage with full CRUD (Create, Read, Update, Delete) operations.

Overview

This lab project provides a hands-on introduction to data storage in Ionic applications. It implements a key-value storage interface where users can create, read, update, and delete items persisted in local storage. The application showcases Ionic UI components, Angular two-way data binding, and asynchronous storage operations using the @ionic/storage-angular package.

Features

• Create/Update items with custom key-value pairs
• Read individual items by key lookup
• Delete items via swipe-to-delete or key-based removal
• Clear all stored items at once
• Dynamic item count display
• Sliding list items with delete action
• Responsive Ionic grid layout
• Capacitor-ready for native mobile deployment

Prerequisites

• Node.js (v16 or higher recommended)
• npm (included with Node.js)
• Ionic CLI (npm install -g @ionic/cli)
• Angular CLI (v16)

Getting Started

Installation

Clone the repository and install dependencies:

git clone https://github.com/danielcregg/lab3-data.git
cd lab3-data
npm install

Usage

Start the development server:

ionic serve

The application will open in your default browser at http://localhost:8100.

How to use the app:

1. Enter a key and value, then click Create/Update Item to store data
2. Enter a key in the Read field and click Get Item to retrieve a value
3. Swipe left on any list item and tap Delete to remove it
4. Click Clear All Items to remove all stored data

Tech Stack

• Framework: Ionic 7 with Angular 16
• Language: TypeScript
• Storage: @ionic/storage-angular
• Native Runtime: Capacitor 5
• Testing: Jasmine + Karma

License

This project is licensed under the MIT License. See the LICENSE file for details.