用javascript保存复选框值的简单方法？

Question

我有几个问题。我的 javascript/编码游戏仍然是一个非常非常初学者我不明白这个网站上已经存在的“保存复选框值”问题。

我认为解决方案非常简单，但我有几个问题。

让我解释一下我的想法/问题： 因为我试图通过向我在 angularJS 网站上找到的现有脚本添加新函数来学习 javascript，所以我偶然发现了一些我自己无法弄清楚的东西。

我有这个复选框列表，并希望保存复选框输入。访问页面时，复选框都是空的。当我检查其中一个框时，我收到一条小消息，上面写着“干得好！”。当我刷新页面时，该框再次为空。我想保存用户输入，以便复选框保持选中状态。

我的代码： HTML：

          <div ng-controller="TodoListController as todoList">         
        <span>Nog {{todoList.remaining()}} van de {{todoList.todos.length}} te gaan!</span>
        <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]-->
        <ul class="unstyled">
          <div class="column">
          <li ng-repeat="todo in todoList.todos">
            <label class="checkbox">
              <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done"> 

              <span class="done-{{todo.done}}">{{todo.text}}</span>

            </label>
          </li>
          </div>
        </ul>
      </div> <!--end ng-controller -->

Javascript/AngularJS：

angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
  {text:'Leer HTML5', done:true},
  {text:'Leer CSS3', done:true},
  {text:'Leer Javascript', done:false},
  ];

todoList.remaining = function() {
  var count = 0;
  angular.forEach(todoList.todos, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};

todoList.archive = function() {
  var oldTodos = todoList.todos;
  todoList.todos = [];
  angular.forEach(oldTodos, function(todo) {
    if (!todo.done) todoList.todos.push(todo);
  });
};
});

我已经阅读了很多其他人提出的问题，但我并不真正了解实现这一目标的所有选项。我找到了这个小小提琴代码，这正是我正在寻找的：http://jsfiddle.net/R73vy/ 当我将此代码复制到自己的 Html 和 js 文件中时，它不起作用。此代码使用客户端通过 cookie 存储数据。我如何自己使用这个工作代码？我错过了什么？是否可以使用我现有的代码来实现这一点？

在此先感谢并原谅我的绝对初学者水平。 如果您有任何问题，请告诉我！

Answer 1

如果你想在你的网页刷新后保存一些值（当我们谈论客户端时），你应该使用存储或 cookie，这取决于你想要实现的目标。 当您刷新页面时，您的所有 javascript 代码都在重新启动并且所有变量都在重新刷新，因此您不能使用它们来保存一些数据或值。 不同的框架有自己的方法，可以让你在页面刷新时保存一些数据。 如果你想使用纯 JS，它可以是 localStorage 或 sessionStorage。 $cookies 如果您想使用 Angular，将帮助您保存模型并在刷新后显示其值。 还有一些我发现的讨论，可能对你很有趣 localStorage vs sessionStorage vs cookies

Answer 2

您在jsfiddle.net 上引用的片段脚本正在使用$.cookie。这是jquery + cookie plugin。

出于某种原因，人们更喜欢在 Angular 中限制 jquery 的使用。在这里可以找到一个很好的讨论："Thinking in AngularJS" if I have a jQuery background?

在您的情况下，我建议您使用 本地存储 而不是 cookie。一些解释可以在这里找到：Local Storage vs Cookies

然后想法是通过npm安装angular-local-storage pakage

那么你应该把你的代码改成这样：

angular.module('todoApp', [])
  .controller('TodoListController', function(localStorageService) {
  var todoList = this;
  todoList.todos = [
    {text:'Leer HTML5', done:localStorageService.get('todo1'), id:'todo1'},
    {text:'Leer CSS3', done:localStorageService.get('todo2'), id:'todo2'},
    {text:'Leer Javascript', done:localStorageService.get('todo3'), id:'todo2'},
  ];

  todoList.onClickItem = function(todoId) {
    if (localStorageService.get( todoId ) {
      localStorageService.set( todoId, false);
    } else {
      localStorageService.set( todoId, true);
    }
  }

  todoList.remaining = function() {
    var count = 0;
    angular.forEach(todoList.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  todoList.archive = function() {
    var oldTodos = todoList.todos;
    todoList.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) todoList.todos.push(todo);
    });
  };
});

并将视图更新为：

<input type="checkbox" onclick="onClickItem('{{todo.todoId}}');" ng-model="todo.done" ng-disabled="todo.done"> 

此代码可能无法立即运行。但这是为了表明解决方案的方向。