html - How can I store and get data from json file? -

i have create html template based on bootstrap need store , data registration forms using j-son file.

i not know how can set , data json file. how can this?

$(function () {      $('.button-checkbox').each(function () {            // settings          var $widget = $(this),              $button = $widget.find('button'),              $checkbox = $widget.find('input:checkbox'),              color = $button.data('color'),              settings = {                  on: {                      icon: 'glyphicon glyphicon-check'                  },                  off: {                      icon: 'glyphicon glyphicon-unchecked'                  }              };            // event handlers          $button.on('click', function () {              $checkbox.prop('checked', !$checkbox.is(':checked'));              $checkbox.triggerhandler('change');              updatedisplay();          });          $checkbox.on('change', function () {              updatedisplay();          });            // actions          function updatedisplay() {              var ischecked = $checkbox.is(':checked');                // set button's state              $button.data('state', (ischecked) ? "on" : "off");                // set button's icon              $button.find('.state-icon')                  .removeclass()                  .addclass('state-icon ' + settings[$button.data('state')].icon);                // update button's color              if (ischecked) {                  $button                      .removeclass('btn-default')                      .addclass('btn-' + color + ' active');              }              else {                  $button                      .removeclass('btn-' + color + ' active')                      .addclass('btn-default');              }          }            // initialization          function init() {                updatedisplay();                // inject icon if applicable              if ($button.find('.state-icon').length == 0) {                  $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i>');              }          }          init();      });  });

/* credit bootsnipp.com css color graph */  .colorgraph {    height: 5px;    border-top: 0;    background: #c4e17f;    border-radius: 5px;    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);  }

<div class="container">    <div class="row">      <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">  		<form role="form">  			<h2>please sign <small>it's free , be.</small></h2>  			<hr class="colorgraph">  			<div class="row">  				<div class="col-xs-12 col-sm-6 col-md-6">  					<div class="form-group">                          <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="first name" tabindex="1">  					</div>  				</div>  				<div class="col-xs-12 col-sm-6 col-md-6">  					<div class="form-group">  						<input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="last name" tabindex="2">  					</div>  				</div>  			</div>  			<div class="form-group">  				<input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="display name" tabindex="3">  			</div>  			<div class="form-group">  				<input type="email" name="email" id="email" class="form-control input-lg" placeholder="email address" tabindex="4">  			</div>  			<div class="row">  				<div class="col-xs-12 col-sm-6 col-md-6">  					<div class="form-group">  						<input type="password" name="password" id="password" class="form-control input-lg" placeholder="password" tabindex="5">  					</div>  				</div>  				<div class="col-xs-12 col-sm-6 col-md-6">  					<div class="form-group">  						<input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="confirm password" tabindex="6">  					</div>  				</div>  			</div>  			<div class="row">  				<div class="col-xs-4 col-sm-3 col-md-3">  					<span class="button-checkbox">  						<button type="button" class="btn" data-color="info" tabindex="7">i agree</button>                          <input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1">  					</span>  				</div>  				<div class="col-xs-8 col-sm-9 col-md-9">  					 clicking <strong class="label label-primary">register</strong>, agree <a href="#" data-toggle="modal" data-target="#t_and_c_m">terms , conditions</a> set out site, including our cookie use.  				</div>  			</div>  			  			<hr class="colorgraph">  			<div class="row">  				<div class="col-xs-12 col-md-6"><input type="submit" value="register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>  				<div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">sign in</a></div>  			</div>  		</form>  	</div>  </div>  <!-- modal -->  <div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">  	<div class="modal-dialog modal-lg">  		<div class="modal-content">  			<div class="modal-header">  				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  				<h4 class="modal-title" id="mymodallabel">terms & conditions</h4>  			</div>  			<div class="modal-body">  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  				<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. similique, itaque, modi, aliquam nostrum @ sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>  			</div>  			<div class="modal-footer">  				<button type="button" class="btn btn-primary" data-dismiss="modal">i agree</button>  			</div>  		</div><!-- /.modal-content -->  	</div><!-- /.modal-dialog -->  </div><!-- /.modal -->  </div>