Сохранить и загрузить состояние флажков в файл

Question

Я хочу сохранить состояние выбранного флажка в файл (как текстовый файл или что-то еще), который содержит информацию о том, что было проверено.

Я не могу использовать локальное хранилище или файлы cookie, мне нужно сохранить их как внешний файл, чтобы я мог сохранять (и загружать) несколько файлов с различными выбранными галочками.

Это довольно просто, но я не могу найти никакого решения, которое бы именно так и поступало, поэтому любая помощь приветствуется.

Простой фрагмент для справки:

div {
    display: table;
}

span {
  display: block;
}

input,
label {
  display: inline-block;
}

<div>
  <span>
    <input id="box1" type="checkbox" />
    <label for="box1">Checkbox 1</label>
  </span>
  
  <span>
    <input id="box2" type="checkbox" checked/>
    <label for="box2">Checkbox 2</label>
  </span>
  
  <span>
    <input id="box3" type="checkbox" />
    <label for="box3">Checkbox 3</label>
  </span>
</div>
<button id="_save">Save</button>
<button id="_load">Load</button>

Answer 1

Хорошо, у меня есть решение, которое делает то, что мне нужно.

Таким образом, когда вы проверяете все, что хотите, из своей формы, вы можете сохранить ее в локальном хранилище, а затем вы можете экспортировать локальное хранилище как JSON. Я обнаружил это расширение Google, которое обрабатывает импорт и экспорт для локального хранилища (в текстовом файле), но вы всегда можете приложить дополнительные усилия и написать собственный сценарий для этого.

Вот JSFiddle для локального хранилища, поэтому вы можете сохранить любой ввод, который вам нужен, и вот расширение chrome, которое обрабатывает импорт и экспорт LocalStorage Manager .

Javascript:

;(function($) {
    $.fn.toJSON = function() {
        var $elements = {};
        var $form = $(this);
        $form.find('input, select, textarea').each(function(){
          var name = $(this).attr('name')
          var type = $(this).attr('type')
          if(name){
            var $value;
            if(type == 'radio'){
              $value = $('input[name='+name+']:checked', $form).val()
            } else if(type == 'checkbox'){
              $value = $(this).is(':checked')
            } else {
              $value = $(this).val()
            }
            $elements[$(this).attr('name')] = $value
          }
        });
        return JSON.stringify( $elements )
    };
    $.fn.fromJSON = function(json_string) {
        var $form = $(this)
        var data = JSON.parse(json_string)
        $.each(data, function(key, value) {
          var $elem = $('[name="'+key+'"]', $form)
          var type = $elem.first().attr('type')
          if(type == 'radio'){
            $('[name="'+key+'"][value="'+value+'"]').prop('checked', true)
          } else if(type == 'checkbox' && (value == true || value == 'true')){
            $('[name="'+key+'"]').prop('checked', true)
          } else {
            $elem.val(value)
          }
        })
    };
}( jQuery ));

//
// DEMO CODE
// 
$(document).ready(function(){
   $("#_save").on('click', function(){
     console.log("Saving form data...")
     var data = $("form#myForm").toJSON()
     console.log(data);
     localStorage['form_data'] = data;

     return false;
   })

   $("#_load").on('click', function(){
     if(localStorage['form_data']){
       console.log("Loading form data...")
       console.log(JSON.parse(localStorage['form_data']))
       $("form#myForm").fromJSON(localStorage['form_data'])
     } else {
       console.log("Error: Save some data first")
     }

     return false;
   })
});

HTML:

<form action="#" method="get" id="myForm">

<input type="text" name="textfield">
Textfield
<br/>

<input type="number" name="numberfield" />
Numberfield
<br/>

<input type="radio" name="radiofield" value="1" />
<input type="radio" name="radiofield" value="2" />
<input type="radio" name="radiofield" value="3" />
Radiofields
<br/>

<input type="checkbox" name="checkfield">
<input type="checkbox" name="checkfield2">
<input type="checkbox" name="checkfield3">
Checkboxes
<br/>

<select name="selectbox">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Selectbox
<br/>

<textarea name="textarea"></textarea>
Textarea
<br/>

<hr/>
<button id="_save">Save</button>
<button id="_load">Load</button>
<input type="reset">

</form>