Question

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

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

让我解释一下我的想法/问题：由于我试图通过向我在angularJS网站上找到的现有脚本添加新功能来学习javascript，我偶然发现了一些我无法弄明白的事情。

我已经获得了此复选框列表，并希望保存复选框输入。访问该页面时，复选框全部为空。当我检查其中一个方框时，我得到了这个小小的消息，说得好像做得好！＆＃39;。当我刷新页面时，该框再次为空。我想保存用户输入，以便复选框保持选中状态。

我的代码： 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 + a cookie plugin。

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

在您的情况下，我会建议您使用本地存储空间而不是 Cookie 。这里有一些解释：Local Storage vs Cookies

然后我的想法是通过angular-local-storage pakage

安装npm

然后你应该将你的代码更改为：

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

此代码可能无法立即生效。但这表明了解决方案的方向。

使用javascript轻松保存复选框值？

2 个答案: