javascript - 使用JS或Angular 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 添加为 Controller 的依赖项

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

要从 localStorage 取回数据，请使用:

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