Saving Data With IonicFramework

Coming from native Android and SQLite, the concept of universal data storage on local devices has been different.  Apache Cordova and IonicFramework, being as awesome as they are, support HTML5 local storage calls.  This allows us to store and retrieve data without the use or knowledge of SQL and on any platform we plan to use.

Typically you would make use of the local storage by using commands like the following:

You can easily use the setItem, getItem, and removeItem methods to manage your data.  The good news is you can use those same commands with IonicFramework.

But what happens if you want to store complex data.  For example what if you wanted to store data from an $http.get request to cache in the event no internet is available in the future.

The above is an example of an fictional API request that gets a users profile.  When the GET request succeeds, the result is stored in the scope as well as a local storage bucket.  However, you can’t just store the raw object into local storage.  You must first serialize it with the JSON.stringify command.  This will create a flat string instead of an object.  Now lets say the profile API is called a second time, but the mobile device’s internet isn’t stable or it doesn’t exist.  The error callback will happen and if the local profile bucket exists, JSON.parse will un-flatten it and store it in our scope.  Besides seeing possibly older data, the user won’t even know that there was a problem.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Hi, I have a question can I save data to sqlite use cordovaSQLite?

  • D3f3nd3r

    Hi Nic,

    Hope you could give me some direction.

    I’m currently using the Ionic framework and have followed this tutorial on localStorage. http://learn.ionicframework.com/formulas/localstorage/

    I have done everything exactly like they explained, but I’m getting this error when running it on CordovaSim

    !JavaScript ERROR: Error: ‘null’ is not an object (evaluating ‘$window.localStorage[key]’)

    What could be the problem here..?

    Thanks

    • For help with official Ionic Framework tutorials, it might be best asked in the forums.

      Why not save your data the way I’ve demonstrated in my article. Or if you’re looking to fancy things up, why not use ngStorage?:

      https://www.thepolyglotdeveloper.com/2014/12/use-ngstorage-angularjs-local-storage-needs/

      You’ve not given me enough information to work with in what you provided.

      Regards,

      • D3f3nd3r

        Hi Nic,

        Thanks for the reply.

        I don’t really think my issue is isolated to ionic. Its basically in general localStorage usage.

        Even if I use the code in your blog post in a controller.

        $scope.login = function(username, password) {

        I get the same result.

        I don’t really know why window.localStorage throws that error.

  • Yanupla

    Awesome Nic! It’s works great! Thanks a lot.

  • Ren

    Will the data be persistent even if the user has closed and reopened the app?

    • Yes, local storage will persist when the app is opened or closed.

      Regards,

  • Daniel

    What about the new ionic view version for iphone, it doesn’t allow to storage in localstorage!!

    • The Ionic View application is beta and is known to have issues. I personally don’t recommend you use it. Your development experience will be much more positive if you build and install to device.

      If you still want to use Ionic View, I recommend you open an issue ticket with the developers.

      Regards,

  • Devunuri Saipraneeth

    Suppose i store data locally whenever i click a button ,Will i get all the locally stored items?Also how to give suggestions when typing text in a input label from local storage

    • Local storage is key value pairs. When retrieving a key, you’ll get only the data saved to that particular key.

      If you want all data, maybe just serialize all your JSON to one particular key.

      You’ll have to make your own logic for doing auto complete. I think AngularJS might have a library for this.

      Regards,

  • Prince

    Hi Nic

    Having a Question regarding ionic Sidemenu

    In the current implementation of the side menus, the side menu pushes the center content over in order to display the side menu.

    I would rather have the side menu look as if it is overlaying the center content. So, the center content would remain stationary and the side menu would look like it is pulling across.

    Is there a way to do this? Is there an example of this effect?Can you provide any example link

  • jim

    Hello Nic
    I am very confused, starting out with ionic and using the “starter tabs” I want to save the data created by the factory. Can you give a detail example of how to use local storage with “factory” ?

    • What factory are you referring to as I didn’t use one in this article?

      If you’re talking about factories in general, I suggest you do a bit of reading on AngularJS (not so much Ionic). It will bring you great benefit.

      If you’re confused strictly on something I wrote about, speak up and I’ll try to explain.

      Regards,

      • jim

        Hello Nic,
        I am referring to this template:
        https://github.com/driftyco/ionic-starter-tabs

        in here: https://github.com/driftyco/ionic-starter-tabs/blob/master/js/services.js
        we can see that a factory was used.

        when “remove” is called in the controller, the item is removed. However, if you close and open the app, the item is still there.

        I want to apply your functionality of local storage to this, so when the user remove an item, and open close the app, the item is still considered removed

        • I encourage you to read up on AngularJS as this isn’t really an Ionic thing. You’ll get better answers Googling for AngularJS.

          What doesn’t make sense in my tutorial? As far as I can tell it should provide everything you need to be able to make a factory once you have a firm understanding of JavaScript and local storage. I won’t provide you any code or do it for you, but I’d be happy to answer questions regarding this article.

          Regards,

  • tom

    Great article Nic. Does local storage persist through app updates. Eg if I have data stored in local storage using your above method would you expect it to persist after you installed an update to the app from the app store?

    • Data will persist through updates yes, however, if you uninstall the application your data will disappear with it.

      Regards,

      • Manas

        Hi Nic, I have used same method to store data however data disappear after app update from Google Play. Please suggest.

        • My assumption is that you have some bad logic somewhere that is wiping out your data. When updating an application, the data layer is left untouched.

          Regards,

  • Manoj Badam

    Nice article, i have been using localstorage to persist the user auth and preferences, its very handy. just came across this article http://gonehybrid.com/dont-assume-localstorage-will-always-work-in-your-hybrid-app/ are there any alternatives apart from DB ?

    • You can use something like PouchDB or Couchbase. They accommodate these scenarios of compatibility.

      Regards,

  • RDR

    Thanks for the article Nic! I implemented the remember me feature on one of my ongoing projects but it doesn’t seem to work, It’s surely a mistake one my side cause’ It’s been about 2 weeks since I started using ionic. My login/register section works (DB used=firebase) I need guidance to set remember me feature. Is there a way that I can give you the project? 🙂

    • As I tend to tell everyone, I’m not interested in your code, I’m interested in your errors. You won’t learn anything if you just throw your project at someone else.

      So it is in your best interest to share with me any error logs or more details.

      If you’re new to Ionic you might take a look at the course I just published for beginners. It won’t solve this particular problem, but you’d probably still learn a lot. It can be found in an ad on the right hand side of my blog.

      In any case, show me your logs and I’ll see how I can help.

      Regards,

  • Shukarullah Shah

    Thanks for this tutorial (Y)

    I have a question, can we store large json data in localStorage?

  • sufiyan khan

    Hey Nic,
    I just implemented it and it works awesome. Just a question can a part of data can be erased.or can i set limit to the local storage for eg i set the limit to the local storage as 10 and as it gets connected to the server i get 4 new entries and i want last 4 to get deleted.

    • You probably want to use a different technology if you’re looking for sync.

  • sufiyan khan

    Hey Nic,
    I just implemented this code of using api. Its working some time and some time its giving me Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data.

    • That means your JSON is incorrectly formatted

  • Marita Sequiera

    hey! i am a newbie to ionic and i am making an app that has a registration and a login page. I want to store the input entered by the users on the REGISTRATION page into the database and let the user login if the input entered by him already exists in the database. can you please guide me on how to do so? Thank you!

    • For the most part this article does everything you just asked. Can you tell me what you’ve tried and what isn’t working for you? I’d rather help you than complete it for you.

      Best,

  • Gayan Ramya Kumara

    A good stuff.Thanks..

    I have a small question ask from you..I am new for Ionic . I want to show logged user name top of bar.
    How can I print this “window.localStorage.getItem(“username”) ” ?

    • You need to set it to a scope variable. Scope and root scope variable can be displayed via the ui

      • Gayan Ramya Kumara

        Thank you @nicraboy:disqus

  • Manish Sankari

    Hi Nic im new in ionic and I want to make an app “to-do” that user login and create their to-do’s and have localstorage, do you have any example, can you help me please?

  • Mohan Gopi

    Hi Nic,
    I am not able to understand $scope.isLoggedIn function can you explain me why we need this fuction and in which part of our project we will be using mostly.

    thank you.

    • Well it is there to check if you’re logged in. It is nothing more than an example of using local storage. Being that there is no encryption involved, it shouldn’t be used seriously.

      The goal of the tutorial is to show how you can set, get, and clear local storage.

  • ENEYSolutions

    Hey, what about data size limit of localStorage?

  • Tom

    WARNING: iOS will arbitrarily empty localstorage if storage space is low. (see https://forum.ionicframework.com/t/ios-localstorage-persistence/20004/11 ). So you should only use for non-critical data.

  • Olajide Awoyinka

    so how do i store user login data into localstorage such that if users login into my app and onDestroy they dont need to login again. please any help this has gotten me stock for a long time now

  • Sohitri Sen

    Hi Nic,

    I am trying to save APN id in localstorage for for my ionic app.It is failing for iOS10. I am using ($window.localStorage.registerPushId = data.registrationId) to set a registration id in local storage, but getting an error that cannot fetch registerPushId of undefined. No localstorage saving operation seems to work for iOS10. However the same code runs for ios9. Any idea, how I can access the localstorage for iOS10 in my project?

    • I’ve not heard anyone mention compatibility problems in iOS 10. Do you get anything in the logs?

      • Sohitri Sen

        I am getting error: cannot fetch registerPushId of undefined.

        It seems local storage cant be accessed by $window.localStorage or window.localStorage.
        No local Storage saving operation works in ios10 but it works fine for ios9.

        • You might want to open an issue ticket for Ionic. My guess is that a few things broke between versions.

          • Sohitri Sen

            Alright. I will. Thank you Nic for answering.

  • Arismel Lyon O’conner

    Hi, i want use sqlite for add, show , and edit data how i should do with ionic and angular ?

  • Kiran Ghuge

    hey Nic, Can you tell me how I can store data in persistent storage for later submission or when there is internet connection.

  • Eduardo Pilos

    Hi, my app won’t save the content in html file after the user make changes. Its like a shoplist, and i want to save the cart forever, until the user deletes, can you help me ?

    • Kiran Ghuge

      declare your cart object in in run method of app.js.
      e.g.
      .run(function($ionicPlatform, $rootScope, localStorage) {
      $ionicPlatform.ready(function() {
      $rootScope.cart= [];
      });

  • Fatin Nazihah

    hey nic, you have shown the app.js file for the method. but as for the html file to display the data in function..how to do that?