title: JQuery - Persist JSON Change
body: <p>I currently have two javascript files: one simply stores a single javascript variable which represents my JSON data and the other is actual JQuery code. For what it is worth, this is how my javascript file that contains the JSON looks like:</p>
  
  <pre><code>var data = '[{"id":[1],"email":["admin"],"password":["admin"],"question":[null],"answer":[null]}]';
  </code></pre>
  
  <p>And my javascript file that contains the JQuery looks like:</p>
  
  <pre><code>var email = $('#settings form input[type="email"]').val();
  var password = $('#settings form input[type="password"]').val();
  var question = $('#settings form select option:selected').text();
  var answer = $('#settings form input[type="text"]').val();
  
  if (email.trim() &amp;&amp; password.trim() &amp;&amp; question.trim() &amp;&amp; answer.trim()) {
      jsonData[0].email[idIndex] = email;
      jsonData[0].password[idIndex] = password;
      jsonData[0].question[idIndex] = question;
      jsonData[0].answer[idIndex] = answer;
  
      $('#settings').modal('toggle');
  } else {
      alert('None of the fields may be left blank.');
  }
  </code></pre>
  
  <p>The JSON will be updated when the code runs, but once the page is refreshed none of the data persists.</p>
  
  <p>My question is how can I get the JSON data to persist when the JQuery changes its value?</p>