如何使用JS或角Js在html中添加行後本地存儲表？

Question

我已使用此代碼從下面的鏈接。

http://codepen.io/akashmitra/pen/eNRVKo

HTML

<div ng-app="app" ng-controller="Ctrl"> 

    <table class="table table-bordered table-hover table-condensed"> 
    <tr style="font-weight: bold"> 
     <td style="width:35%">Name</td> 
     <td style="width:20%">Status</td> 
     <td style="width:20%">Group</td> 
     <td style="width:25%">Edit</td> 
    </tr> 
    <tr ng-repeat="user in users"> 
     <td> 
     <!-- editable username (text with validation) --> 
     <span editable-text="user.Name" e-name="Name" e-form="rowform" e-required> 
      {{ user.Name || 'empty' }} 
     </span> 
     </td> 
     <td> 
     <!-- editable status (select-local) --> 
     <span editable-text="user.Company" e-name="Company" e-form="rowform"> 
      {{ user.Company || 'empty' }} 
     </span> 
     </td> 
     <td> 
     <!-- editable group (select-remote) --> 
     <span editable-text="user.Type" e-name="Type" e-form="rowform"> 
      {{ user.Type || 'empty' }} 
     </span> 
     </td> 
     <td style="white-space: nowrap"> 
     <!-- form --> 
     <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user"> 
      <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary"> 
      save 
      </button> 
      <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default"> 
      cancel 
      </button> 
     </form> 
     <div class="buttons" ng-show="!rowform.$visible"> 
      <button class="btn btn-primary" ng-click="rowform.$show()">edit</button> 
      <button class="btn btn-danger" ng-click="removeUser($index)">del</button> 
     </div> 
     </td> 
    </tr> 
    </table> 

    <button class="btn btn-default" ng-click="addUser()">Add row</button> 
</div> 

CSS

div[ng-app] { margin: 10px; } 
.table {width: 100% } 
form[editable-form] > div {margin: 10px 0;} 

JS

var app = angular.module("app", ["xeditable"]); 

app.run(function(editableOptions) { 
    editableOptions.theme = 'bs3'; 
}); 

app.controller('Ctrl', function($scope, $filter, $http) { 
    $scope.users = [{ 
     Name: "Ankit Verma", 
     Company: "Westeros Inc.", 
     Type: "Communication Engineer", 
     Reporting: "7:12pm Oct 28, 2013" 
    }, { 
     Name: "Amit Kumar Roy", 
     Company: "King's Landing Corp", 
     Type: "Pilot 1", 
     Reporting: "8:12pm Nov 14, 2013" 
    }, { 
     Name: "Akash Mitra", 
     Company: "Castle Black Ltd", 
     Type: "Cabin Crew", 
     Reporting: "9:12am Oct 05, 2013" 
    },{ 
     Name: "Tony Stark", 
     Company: "Stark Industries", 
     Type: "Cabin Crew", 
     Reporting: "6:30pm Nov 20, 2013" 
    }]; 

    $scope.showGroup = function(user) { 
    if(user.group && $scope.groups.length) { 
     var selected = $filter('filter')($scope.groups, {id: user.group}); 
     return selected.length ? selected[0].text : 'Not set'; 
    } else { 
     return user.groupName || 'Not set'; 
    } 
    }; 

    $scope.showStatus = function(user) { 
    var selected = []; 
    if(user.status) { 
     selected = $filter('filter')($scope.statuses, {value: user.status}); 
    } 
    return selected.length ? selected[0].text : 'Not set'; 
    }; 

    // remove user 
    $scope.removeUser = function(index) { 
    $scope.users.splice(index, 1); 
    }; 

    // add user 
    $scope.addUser = function() { 
    $scope.inserted = { 
     id: $scope.users.length+1, 
     name: '', 
     status: null, 
     group: null 
    }; 
    $scope.users.push($scope.inserted); 
    }; 
}); 

正如我所願，我可以添加，編輯和刪除表格。

但刷新頁面後修改的數據已被禁用。

如何存儲數據？

真的，如果有人解決這個問題，對我有幫助。

Answer 1

加$的localStorage作爲依賴於你的控制器

localStorage.setItem('users', JSON.stringify($scope.users)); 

獲取數據從本地存儲，採用背：

$scope.users = JSON.parse(localStorage.getItem('users'));