将本地存储值分配给 $scope答案

【问题标题】：Assign local storage value to $scope将本地存储值分配给 $scope
【发布时间】：2017-04-10 01:03:53
【问题描述】：

我正在尝试将本地存储值分配给 $scope 变量，并在 ng-model 中使用该 $scope 变量来初始化下拉菜单。我正在尝试下面的代码，但它不起作用。

这里是 plunker：https://plnkr.co/edit/Ile7ehzxB9PcoeTKk1B6?p=preview

我只需要从本地存储初始化它，因为我只通过本地存储接收数据。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    var app = angular.module('appNew', []);
    app.controller('controllerNew', function($scope) {
      $scope.dataSet = ["A", "B", "C"];
      localStorage['color'] = {"A":"Red","B":"Red","C":"Blue"};
      var colorVar = localStorage['color'] || '';
      $scope.selectColor = colorVar;
    });
  </script>
</head>

<body ng-app="appNew">
  <table class="table TableOne" ng-controller="controllerNew">
    <thead>
      <tr>
        <th>Serial</th>
        <th>Data</th>
        <th>Dropdown</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="data in dataSet">
        <td>{{$index + 1}}</td>
        <td>{{data}}</td>
        <td>
          <select ng-model="$parent.selectColor[data]">
            <option value="">-- Select --</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【问题讨论】：

标签： javascript angularjs drop-down-menu angularjs-scope local-storage

【解决方案1】：

LocalStorage 目前允许存储键/值对 - 请参阅 doc here：

Web Storage API 提供了浏览器可以存储的机制键/值对，比使用 cookie 更直观。

所以你可以stringify 用于存储的对象和parse 他们从本地存储中取回它，如下所示：

  localStorage['color'] = JSON.stringify({"A": "Red","B": "Red","C": "Blue"});
  $scope.selectColor = JSON.parse(localStorage['color']);

请参阅下面的 sn-p - 由于限制，sn-p 可能无法工作 - 请查看plnkr code here。

var app = angular.module('appNew', []);
app.controller('controllerNew', function($scope) {
  $scope.dataSet = ["A", "B", "C"];
  
  localStorage['color'] = JSON.stringify({"A": "Red","B": "Red","C": "Blue"});
  $scope.selectColor = JSON.parse(localStorage['color']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="appNew">
  <table class="table TableOne" ng-controller="controllerNew">
    <thead>
      <tr>
        <th>Serial</th>
        <th>Data</th>
        <th>Dropdown</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="data in dataSet">
        <td>{{$index + 1}}</td>
        <td>{{data}}</td>
        <td>
          <select ng-model="selectColor[data]">
            <option value="">-- Select --</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：