title: How to keep localStorage values after refresh?
body: <p>This is my ctrl:</p>
  
  <pre><code>app.controller('ctrl', function ($window, $scope) {
  
      $scope.initData = [
          {
              firstName: "John",
              lastName: "Doe",  
          },
          {
              firstName: "Jane",
              lastName: "Doe",
          },
          {
              firstName: "John",
              lastName: "Smith",
          }
      ];
  
      $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
      $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
      $scope.sortedType = 'firstName';
      $scope.sortedReverse = false;
      //Remove Rows and Update localStorage Key Values
      $scope.removeRow = function(row) {
          $scope.retrievedData.splice(row, 1);
          $scope.initData.splice(row, 1);
          $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="table table-bordered table-striped table-hover"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          &lt;span ng-show="sortedType == 'firstName' &amp;&amp; sortedReverse" class="fa fa-long-arrow-up"&gt;&lt;/span&gt;
                          &lt;span ng-show="sortedType == 'firstName' &amp;&amp; !sortedReverse" class="fa fa-long-arrow-down"&gt;&lt;/span&gt;
                          &lt;span href="#" ng-click="sortedType = 'firstName'; sortedReverse = !sortedReverse" style="cursor:pointer;"&gt;First Name&lt;/span&gt;
                      &lt;/th&gt;
                      &lt;th&gt;
                          &lt;span ng-show="sortedType == 'lastName' &amp;&amp; sortedReverse" class="fa fa-long-arrow-up"&gt;&lt;/span&gt;
                          &lt;span ng-show="sortedType == 'lastName' &amp;&amp; !sortedReverse" class="fa fa-long-arrow-down"&gt;&lt;/span&gt;
                          &lt;span href="#" ng-click="sortedType = 'lastName'; sortedReverse = !sortedReverse" style="cursor:pointer;"&gt;Last Name&lt;/span&gt;
                      &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr ng-repeat="(k, v) in retrievedData | orderBy: sortedType: sortedReverse"&gt;
                  &lt;td&gt;{{v.firstName}}&lt;/td&gt;
                  &lt;td&gt;{{v.lastName}}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-primary"&gt;Edit&lt;/button&gt;
                      &lt;button class="btn btn-primary" ng-click="removeRow();"&gt;Delete&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Now, I believe it is clear what this does. It is assigning a data from <code>$scope.initData</code> to <code>localStorage</code> and then interpolate it into the HTML. the function <code>removeRow()</code> deletes the row in the table and updates the <code>localStorage</code> with the latest action. The issue with this is that each time I reload the HTML the initial <code>localStorage</code> data gets loaded and not the updated one. I know that this is because I'm assigning it here: <code>$window.localStorage.setItem('initData', JSON.stringify($scope.initData))</code>; but I don't know how to keep it updated after the refresh.</p>
  
  <p>Please advise.</p>
  
  <p>Thanks.</p>