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

【问题标题】：angular update local storage single object角度更新本地存储单个对象
【发布时间】：2016-05-14 12:47:23
【问题描述】：

我有一些本地存储项，它们是对象列表。

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

然后我不知道如何只更新本地存储的单个记录。

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

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

【问题讨论】：

我通常使用本地存储并且更新整个对象是我看到的唯一解决方法。
您无法更新本地存储中的特定值。您必须更新整个对象，因为它将其存储为 Key:Value 对。
你必须保存回localStorage，它不会自己发生。向我们展示您的localStorageService
还建议使用ngStorage，它更健壮，会自动为您保存内容

标签： angularjs local-storage

【解决方案1】：

本地存储值保存为字符串。

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

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

【讨论】：

【解决方案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 函数更新数据，您的视图就会响应模型的更改。

【讨论】：