Question

我有一些本地存储项目是对象列表。

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

会输出类似的内容：

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

假设我想将luna的颜色更新为棕色。

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

 myKitten.color = "brown";

然后我无法弄清楚如何只更新本地存储的单个记录。

实际上我正在向服务器发送更新记录的请求，但是我的应用程序中没有更新。

当响应回来时我想更新本地存储中的记录，但我似乎只能更新ENTIRE本地存储项（“kittens”）。我没有在docs中看到这样做的方法，但觉得应该有一种方法可以做到这一点，我忽略了。

Answer 1

Localstorage值保存为字符串。

所以你必须像这样保存它：

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

或者您可以将某些支持库用作LocalForage

Answer 2

<强> The Plunker

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>

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

请注意，我正在通过使用angular.copy（）进行复制来破坏绑定，以用于本实验。但是，如果您要删除副本并直接绑定它，那么一旦get函数更新数据，您的视图就会响应模型的更改。

角度更新本地存储单个对象

2 个答案: