javascript - 使用 AngularJS 和 ng-storage 进行 session 存储

Question

我正在开发一个聊天应用程序。我有下一个 HTML:

<input type='text' id='nameInput' placeholder='Your Name'>

我也在使用 AngularJS，这是我的模块:

var app = angular.module('principal', ['ngStorage']);
app.controller('MainCtrl', function($scope, $sessionStorage) {
  $scope.$storage = $sessionStorage.$default(#nameInput);
});

如您所见，我有 ngStorage 作为依赖项。我正在尝试 session 存储输入值，因此如果用户不小心刷新页面，他的名字仍然写在输入中，但我的代码不起作用，我该怎么办？

更新现在，多亏了 Matt，我解决了我的疑问。

Answer 1

您需要将 View (在本例中为输入元素)绑定(bind)到模型中的值。您可以使用 ng-model 来执行此操作。例如:

<input type="text" ng-model="state.nameInput" placeholder="Your Name">

然后您只需在 Controller 中设置范围即可。

$scope.state = {
    nameInput: 'John'
};

<小时/>

如果您想使用 ngStorage 作为绑定(bind)(而不是常规的 $scope 值)，请在 Controller 中尝试以下操作:

$scope.$storage = $sessionStorage.$default(/* any defaults here */);

在你的 html 中

<input type="text" ng-model="$storage.nameInput" placeholder="Your Name">

<小时/>

基本上，你所说的是；把$sessionStorage直接在 $scope 上对象，以便 View 可以引用它及其 subview 。然后你告诉<input>您希望其值使用 ng-model 引用该范围内的特定子项。因此，当您更改输入上的值时，它将更改范围模型值，进而更新 session 存储。