https://github.com/varmatilak22yardi/todo-2-app

This Angular-based To-Do List app uses the localStorage API to ensure persistent task management. Tasks are saved directly in the user's browser, remaining intact across sessions, even after a refresh or closing the app. It offers a seamless, reliable experience for managing tasks offline.
https://github.com/varmatilak22yardi/todo-2-app

angular angular-cli angular19 deployment github-pages html-css-javascript localstorage standalone-components typescript webstorageapi

Last synced: 5 days ago
JSON representation

This Angular-based To-Do List app uses the localStorage API to ensure persistent task management. Tasks are saved directly in the user's browser, remaining intact across sessions, even after a refresh or closing the app. It offers a seamless, reliable experience for managing tasks offline.

• Host: GitHub
• URL: https://github.com/varmatilak22yardi/todo-2-app
• Owner: varmatilak22yardi
• Created: 2025-01-31T12:39:29.000Z (11 days ago)
• Default Branch: main
• Last Pushed: 2025-01-31T12:57:31.000Z (11 days ago)
• Last Synced: 2025-01-31T13:38:32.538Z (11 days ago)
• Topics: angular, angular-cli, angular19, deployment, github-pages, html-css-javascript, localstorage, standalone-components, typescript, webstorageapi
• Language: TypeScript
• Homepage: https://varmatilak22yardi.github.io/Todo-2-App/
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# To-Do List App with LocalStorage in Angular 📝

This Angular-based To-Do List app allows users to add, edit, and delete tasks. It utilizes the **localStorage API** to save tasks on the user's device, ensuring persistence across sessions. With local storage, your tasks are safe even after page refreshes or app restarts. 🚀

## Features ✨

- **Add tasks** to your to-do list. ➕

- **Edit tasks** and update their details. ✏️

- **Delete tasks** when completed or no longer needed. ❌

- **Persistent task storage** using the localStorage API for seamless access across sessions. 💾

## LocalStorage Integration in Angular 🔒

This app uses the **localStorage API** to store tasks directly in the browser, ensuring that tasks persist even after a page refresh or when the app is reopened. Here's how it works:

- Tasks are saved in the browser's local storage as key-value pairs, ensuring that the user's to-do list remains available each time they access the app.

- The app checks for existing tasks in localStorage when it loads and updates the task list accordingly.

Example of using localStorage:

```typescript

// Save task to localStorage

localStorage.setItem('tasks', JSON.stringify(this.tasks));

// Retrieve tasks from localStorage

this.tasks = JSON.parse(localStorage.getItem('tasks') || '[]');

```

## Setup and Installation ⚙️

### Prerequisites 📋

Ensure you have the following installed:

- [Node.js](https://nodejs.org/) (v14.x or higher) 💻

- [Angular CLI](https://angular.io/cli) 📦

### Install the dependencies 📥

Clone the repository and install the dependencies:

```bash

git clone https://github.com/your-username/todolist-app.git

cd todolist-app

npm install

```

## Run the application 🚀

To run the application locally, use the following command:

```bash

ng serve

```