tholo tholo -4 years ago 47
AngularJS Question

Removing localStorage key depending on the row of the table (index)

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'));
console.log($scope.retrievedData);
$scope.sortedType = 'firstName';
$scope.sortedReverse = false;


$scope.removeRow = function (row) {
$scope.retrievedData.splice(row, 1);
$window.localStorage.removeItem('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>


My
ng-controller
and
ng-app
is assigned in the html, so we need not to worry about that. What happens here with the
removeRow()
function is that I manage to delete the row, but I need it to delete it from
localStorage
as well. At this point, doing the
$window.localStorage.removeItem('initData');
is not an option, since it deletes entire object. How can I do this?

How can I delete the part of the
localStorage
that only contains the data that is removed with the row?

EDIT: I understand that I can't edit the key values, but how can I set the new ones? Placing the
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
in the function doesn't really help.

SOLUTIN: Thanks to the guys that answered. I've fixed it by adding:
$scope.initData.splice(row, 1);
below
$scope.retrievedData.splice(row, 1);
I've figured out that I've already been using the index in the
row
argument. After that I've wrote:
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
Thanks.

Answer Source

You'll have to overwrite the whole object after you remove the row:

$scope.removeRow = function (row) {
    $scope.initData.splice(row, 1);
    $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download