时间戳

首页 > 解决方案 > 保存并加载复选框状态到文件

javascript - 保存并加载复选框状态到文件

问题描述

我想将选中复选框的状态保存到一个文件（无论是文本文件还是其他文件），其中包含有关检查内容的信息。

我不能使用 localstorage 或 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>

标签： javascriptjsonfile

解决方案

好的，我有一个可以满足我需要的解决方案。

因此，当您从表单中检查所需的所有内容时，您可以将其保存到 localstorage，然后您可以将 localstorage 导出为 JSON。我发现这个谷歌扩展处理本地存储的导入和导出（在文本文件中），但你总是可以加倍努力并为此编写自己的脚本。

这是本地存储的JSFiddle，因此可以保存您想要的任何输入，这是处理导入和导出LocalStorage Manager的 chrome 扩展。

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>

推荐阅读