チェックボックスの値をjavascriptで簡単に保存できますか？

Question

私はいくつか質問がありました。私のjavascript /コーディングゲームはまだ非常に初心者です私はこのサイトに既にあるチェックボックスの値を保存する 'を理解していない。

私は解決策が本当に簡単だと思いますが、私にはいくつか質問があります。

私はidea/problemを説明しましょう：私はangularJSウェブサイトで見つけた既存のスクリプトに新しい機能を追加することによってjavascriptを学びたいので、私は自分自身を理解できなかったいくつかの事を見つけました。

私はこのチェックボックスのリストを持っており、チェックボックスの入力を保存したいと思います。ページにアクセスすると、チェックボックスはすべて空です。私がボックスの1つをチェックすると、この小さなメッセージが「よくできました！ページを更新すると、ボックスは再び空になります。私は、チェックボックスがチェックされたままになるようにユーザ入力を保存したい。

マイコード： 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を使用する場合は、モデルを保存し、更新後にその値を表示するのに役立ちます。 そしてまた私が見つけたいくつかの議論があり、あなたがjsfiddle.net上で参照されている作品のスクリプトが$.cookieを使用しているあなたのための localStorage vs sessionStorage vs cookies

Answer 2

面白いかもしれません。 jquery + a cookie pluginです。

何らかの理由で、人々はjqueryの使用をAngularで制限したいと考えています。それについての良いdiscutionがここにあります：あなたのケースでは"Thinking in AngularJS" if I have a jQuery background?

あなたは、私が代わりにクッキーのローカルストレージのご使用をアドバイスします。いくつかの説明がここに用意されていますよう

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); 
    }); 
    }; 
}); 

とビューを更新：

Local Storage vs Cookies

その後アイデアは、その後、あなたがこのような何かにあなたのコードを変更する必要がありnpm

経由angular-local-storage pakageをインストールすることです

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

このコードはすぐに動作しない場合があります。しかし、それは解決への方向を示すことです。