title: LocalStorageModule in Angular JS to save data
body: <p>I'm building an app with Angular JS and I want to have some specific data persistant in the localStorage to retrieve it later. The thing is that I'm having trouble with the code to accomplish that. Im trying to add more assistants to an event when you click a button but the Inspector always give this error:
      SyntaxError: Unexpected token u in JSON at position 0
      at Object.parse (native).</p>
  
  <p>I have a controller.js separated from the app.js and then I injected the controllers in my app.module.</p>
  
  <p>It would be great if you can help me. Thanks in Advance.</p>
  
  <p>Here is the piece of code that gives me error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  /* Controllers */
  
  angular.module('Erasmore.controllers', [])
    .controller('Posts', ['$scope', '$http',
      function($scope, $http, localStorageService) {
        $http.get("json/posts.json").success(function(data) {
          $scope.posts = data;
        });
  
        $scope.assistants = [{
          id: 1,
          name: "James Smith",
          nationality: "English"
        }, {
          id: 3,
          name: "Juan García",
          nationality: "Spanish"
        }, {
          id: 3,
          name: "Eduardo Cruz",
          nationality: "Spanish"
        }, {
          id: 4,
          name: "Jurgen Low",
          nationality: "German"
        }, ];
  
        var newParticipant = localStorage['assistantList'];
        if (newParticipant !== undefined) {
          $scope.newAssistant = JSON.parse(newParticipant);
        }
  
        $scope.newAssistant = {};
  
        $scope.addAssistant = function() {
          $scope.assistants.push($scope.newAssistant);
          $scope.newAssistant = "";
          localStorage['assistantList'] = JSON.stringify($scope.newAssistant);
          console.log(localStorage);
        };
  
      }
    ])</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;Are you coming?&lt;/p&gt;
    &lt;input placeholder="Enter your name" id="name" type="text" class="validate" ng-model="newAssistant.name"&gt;
    &lt;input placeholder="Enter your nationality" id="nationality" type="text" class="validate" ng-model="newAssistant.nationality"&gt;
    &lt;button class="waves-effect waves-light btn" ng-click="addAssistant()"&gt;Confirm&lt;/button&gt;
    &lt;button class="waves-effect waves-teal btn-flat modal-trigger"&gt;See Assistants&lt;/button&gt;
    &lt;ul&gt;
      &lt;li id="asistentes" ng-repeat="assistant in assistants"&gt;{{assistant.name}} &lt;span&gt;-&lt;/span&gt; {{assistant.nationality}}&lt;/li&gt;
    &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>