Saving app settings in Ionic Framework (AngularJS)

Question

I've got a fairly basic settings page in my Ionic app, and the tab view looks like this:

<ion-view title="Settings">
  <ion-content class="has-header">

<ul class="list">

  <label class="item item-input item-label">
    <span class="input-label">Hours per week</span>
    <input type="text" value="37.5">
  </label>

  <label class="item item-input item-label">
    <span class="input-label">Days per week</span>
    <input type="text" value="5">
  </label>

  <label class="item item-input item-label">
    <span class="input-label">Pension Contribution</span>
    <input type="text">
  </label>

  <label class="item item-input item-select">
    <div class="input-label">
      Age
    </div>
    <select>
      <option selected>Under 65</option>
      <option>65-74</option>
      <option>75+</option>
    </select>
  </label>

  <label class="item item-input item-select">
    <div class="input-label">
      Weeks Option
    </div>
    <select>
      <option selected>Weekly</option>
      <option>2 Weeks</option>
      <option>4 Weeks</option>
    </select>
  </label>

      <li class="item item-toggle">
     National Insurance
     <label class="toggle toggle-positive">
       <input type="checkbox" value="on">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  <li class="item item-toggle">
     Student Loan
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

   <li class="item item-toggle">
     Registered Blind
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

      <li class="item item-toggle">
     Married
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

</ul>

  </ion-content>
</ion-view>

What I want to do is to save the states of these elements (so if the user enters a different number of days per week or toggles a checkbox on/off or chooses an option from a dropdown list) to the local storage so that the next time the app is initiated, it will load these saved values.

I'm having a hard time finding any good information on how to do this in the Ionic docs and am new to Angular, so would appreciate any help on either a) how to go about this, or b) where I can find the information to learn how to do it.

Cheers!

Answer 1

Yo can inject Angular-local-storage in your controller as your dependency and then can have this code in your controller

$scope.hoursPerWeek = '';
$scope.submitClicked = function(){
    localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
}

However first in your html you need to have two way binding with hoursPerWeek object.

<label class="item item-input item-label">
   <span class="input-label">Hours per week</span>
   <input type="text" ng-model="hoursPerWeek" value="37.5">
</label>

For each field you need to have a similar approach