javascript - How to local storage the table after adding rows in html using JS or angular Js? -

i have used code below link.

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 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);   }; }); 

as wish, can add, edit , delete table.

but modified data has disabled after refresh page.

how can store data?

really, helpful me, if solve this.

add $localstorage dependency controller

localstorage.setitem('users', json.stringify($scope.users)); 

to data localstorage, use:

$scope.users = json.parse(localstorage.getitem('users'));