💾 Angular Local Storage Basics

---

📑 Table of Contents

• 💾 Angular Local Storage Basics

  • 🌐 Live Demo
  • 📖 Description
  • ⚙️ System Requirements
  • 🚀 Project Installation
  • ▶️ Run the Project
  • 🧠 Project Architecture
  • ✨ Features
  • 🛠 Technologies Used
  • 📁 Project Structure
  • 💡 Concepts Learned
  • 🎯 Project Goal
  • 📄 License

---

🌐 Live Demo

🔗 https://alobuuls.github.io/angular-local-storage-basics/

---

📖 Description

Note

An Angular 16 application that demonstrates the fundamentals of Local Storage for persisting data in the browser.

The project shows how to store and retrieve primitive values and JSON objects using the Local Storage API, as well as the use of JSON.stringify() and JSON.parse() for data serialization and deserialization.

---

⚙️ System Requirements

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

Recommended using nvm

nvm install 18
nvm use 18

---

🔍 Verify Installed Versions

Run the following commands in your terminal:

node -v
npm -v
ng version

---

🚀 Project Installation

1️⃣ Clone the repository

git clone git@github.com:alobuuls/angular-local-storage-basics.git

cd angular-local-storage-basics

2️⃣ Install dependencies

npm install

---

▶️ Run the Project

Start the development server:

ng serve

Then open:

http://localhost:4200

---

🧠 Project Architecture

The application follows a simple Angular architecture focused on demonstrating browser-side data persistence.

📦 App Component

Responsible for:

• Storing data in Local Storage
• Retrieving stored values
• Persisting strings
• Persisting JSON objects
• Displaying results through the browser console

---

✨ Features

• 💾 Store data in Local Storage
• 📤 Retrieve stored data
• 🧾 Use of JSON.stringify()
• 🔄 Use of JSON.parse()
• 📦 Object persistence
• ⚡ Browser-side storage
• 🖥️ Console-based output

---

🛠 Technologies Used

Technology	Purpose
Angular 16	Front-End Framework
TypeScript	Application Logic
Local Storage API	Browser Persistence
JSON API	Data Serialization

---

📁 Project Structure

angular-local-storage-basics/

├── src/
│
├── app/
│   ├── 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

---

💡 Concepts Learned

• Browser data persistence
• Local Storage API
• JSON serialization
• JSON deserialization
• Object storage and retrieval
• Client-side state persistence
• Angular component lifecycle basics

---

🎯 Project Goal

Practice and strengthen Angular fundamentals through the implementation of browser-based persistence using Local Storage.

Key concepts covered:

• Local Storage API
• Data Persistence
• JSON.stringify()
• JSON.parse()
• Angular Components
• TypeScript Fundamentals
• Browser Storage Mechanisms

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.