localstorage
Ionic

Get and Set Data In LocalStorage In Ionic 2 app

Hey Fellas. Ready to learn something new in Ionic 2?

If you are new to Ionic 2, don’t worry. Here are some links provided to you so that you can go through it and understand the basics of Ionic 2.

Start with Ionic 2

Ionic 2 Tutorial

Before you go through this article you should have Ionic 2 set up on your machine, so that you can practically do and understand the steps required and have fun creating Ionic applications.

Today we will be going through a step by step process for creating an item list with data passed to Local Storage. Let me put this in more simple words, we will be adding item to a list and deleting them from the list with the help of windows local storage.

Let’s start coding….

Before starting let me introduce you to the flow of the pages that we are gonna create so that you don’t get confused.

Homepage(where you gonna write the name that you want to insert into the list and click ‘ADD’ button)=>Listpage (Where it will show the name on the list that you have added)

So we have 2 pages :

i) home

ii) lists

Now follow the steps:

First, Create a blank project.

For those who are new to Ionic 2 follow the link provided below to create a blank project.

Creating a blank Ionic 2 project

Your blank project when run on a window screen will look like this:

blank

Second, Add the required pages through command prompt to your project.
ionic g page lists

Third, In the main page we will create a list of items. I guess taking an example along with this article will make it more clear to understand. Let’s say we want to create a list of students studying in a class.

When we created our project we can find the pages in (your Project Name)->src>pages folder.

The ‘pages folder will contain the following files after generating the required pages:

a) home

   i) home.html

   ii) home.scss

   iii) home.ts

b) lists

   i) lists.html

   ii) lists.scss

   iii) lists.ts

 

We will add an input and a button to the homepage which will insert the input data to the list on the next page.

The home.html will look like this after the update:

html

 

The home.ts will have following changes:

ts

 

Now you can just check and see whatever you have created so far on the windows screen by running the following command on the command prompt:
ionic serve

I hope you could see the output and it runs fine… If yes then, well you are halfway through it and it will just take some more time to complete the task… So don’t get bored and go with the flow…

 

Fourth, now onto the next step. Here we are going to create a list and enter the input data to the list.

I’ll just give a gist of what we are going to do or say what will the code do. As we will enter the name in home page and click on the button, the name will be send to the local storage and then we will get the data from local storage where we need it to be shown. I hope you got what i am trying to say. And if not, don’t worry the code is self-explanatory.

Moving to the code of lists page.

Lists.html will look like this:

lists_html

 

And the lists.ts file will have the following changes.

lists_ts

This is it…..

Oh Wait….

Just one last step and it’s done(note this because it’s an important step):

You should create a page global:

ionic g page global

In the global.ts file just add the following code outside the export class:

global

Yes, now it’s done….

Now it’s time to see the demo. To see the demo of what you have created run the following code in command prompt.
ionic serve

The demo project looks like this:

sample1        sample2

I hope you liked reading and gaining some knowledge. Congrats you just did a wonderful job.

Note: I know I promised for a list of items with a delete button. So, don’t worry this link will guide you to the page if you want to do so.

You can download the Source Code of this article as bonus from my Github repo.

Good Luck. Hope to see you soon with more interesting articles. Your suggestions and advice are most welcome.

In the next article we will be messing around doing the same task but with ‘webSql’.

Get and Set Data In LocalStorage In Ionic 2 app

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top