This is my ctrl:
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));
}
});
HTML:
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
<span ng-show="sortedType == 'firstName' && sortedReverse" class="fa fa-long-arrow-up"></span>
<span ng-show="sortedType == 'firstName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
<span href="#" ng-click="sortedType = 'firstName'; sortedReverse = !sortedReverse" style="cursor:pointer;">First Name</span>
</th>
<th>
<span ng-show="sortedType == 'lastName' && sortedReverse" class="fa fa-long-arrow-up"></span>
<span ng-show="sortedType == 'lastName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
<span href="#" ng-click="sortedType = 'lastName'; sortedReverse = !sortedReverse" style="cursor:pointer;">Last Name</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in retrievedData | orderBy: sortedType: sortedReverse">
<td>{{v.firstName}}</td>
<td>{{v.lastName}}</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-primary" ng-click="removeRow();">Delete</button>
</td>
</tr>
</tbody>
</table>
Now, I believe it is clear what this does. It is assigning a data from $scope.initData
to localStorage
and then interpolate it into the HTML. the function removeRow()
deletes the row in the table and updates the localStorage
with the latest action. The issue with this is that each time I reload the HTML the initial localStorage
data gets loaded and not the updated one. I know that this is because I'm assigning it here: $window.localStorage.setItem('initData', JSON.stringify($scope.initData))
; but I don't know how to keep it updated after the refresh.
Please advise.
Thanks.
Your line $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
is resetting the data each time you refresh.
Replace the line with this:
if(!localStorage.getItem('initData')){
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
More over you should not have that line at all. Start with an empty local storage and add new entries from UI only.
The above code only run it once, for the first time the application is run.
If yo want to re-insert the data every time the list is empty then try following
if(!localStorage.getItem('initData') || JSON.parse(localStorage.getItem('initData')).length === 0){
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With