angular update local storage single object

Question

I have some local storage items that are a list of objects.

console.log(localStorageService.get("kittens"));

would output something like:

[
    {"name": "fluffy", "color": "white" }, 
    {"name": "luna", "color": "black" }
]

let's say I want to update luna's color to brown.

 var myKitten = localStorageService.get('kittens').filter(function(kitten){
    return kitten.name == "luna";
 })[0];

 myKitten.color = "brown";

And then I can't figure out how to update just the single record of the local storage.

In reality I'm sending a request to the server to update the record, however it doesn't get updated in my app.

When the response comes back I want to update the record in local storage as well, but I seem to be able to only update the ENTIRE local storage item ("kittens"). I don't see a way to do this in the docs, but feel that there should be a way to do this that I'm overlooking.

Solution 1

Localstorage values are saved as strings.

So you have to save it like this:

var kittens = [
    {"name": "fluffy", "color": "white" }, 
    {"name": "luna", "color": "black" }
]

// Save array in local storage as string
localStorage.setItem("kittens",JSON.stringify(kittens));

// Get back item "kittens" from local storage
var kittensFromLocalStorage = JSON.parse(localStorage.getItem("kittens"));

// Change value
kittensFromLocalStorage[1].name = "jasmine";

// Save the new item with updated value
localStorage.setItem("kittens",JSON.stringify(kittensFromLocalStorage));

Or you can use some support library as LocalForage

Solution 2

The Plunker

The html:

<form>
  <h2 class="text-primary">Angular update local storage single object</h2>
  <hr>
  <div class="form-group">
    <h3 class="text-success">Cats: Controller List</h3>
    <div ng-repeat="cat in mainCtrl.myCats">
      Name: <input type="text" ng-model="cat.name">
      Color: <input type="text"ng-model="cat.color">
    </div>

  </div>

  <button type="button" class="btn btn-success" ng-click="mainCtrl.saveToLocalStorage()">Save Changes</button>
</form>

<hr>
<h3 class="text-info">This is what is stored</h3>
<div class="form-group">
    <h3 class="text-success">Cats: Local Storage List</h3>
    <div ng-repeat="cat in mainCtrl.localStorage.cats">
      Name: <input type="text" ng-model="cat.name">
      Color: <input type="text"ng-model="cat.color">
    </div>

The JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) {

  var myCtrl = this;

    myCtrl.myCats = angular.copy(tempDataStorageService.cats);

    myCtrl.localStorage = tempDataStorageService;

    myCtrl.saveToLocalStorage = function () {
      tempDataStorageService.cats = angular.copy(myCtrl.myCats);
    }

}]);


app.factory('tempDataStorageService', function() {
    // The service object
    var storage = this;

    storage.cats = [{name: "fluffy", color: "white" }, 
                {name: "luna", color: "black" }];

    // return the service object
    return storage;
});

Notice that I am breaking the binding by making copies using angular.copy() for the purpose of this experiment. However, if you were to eliminate the copy and bind it directly your view would respond to the changes of your model once your get function updates the data.

Comments

[Vaibhav]

You cant update specific value in localstorage. you have to update whole object because it stores it as Key:Value pair.