JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    name:<input type="text" data-setting="name" /><br>
age:<input type="text" data-setting="age" /><br>
description:<textarea data-setting="description"></textarea><br>
accept:<input type="checkbox" data-setting="accept" /><br>
    <input type="submit" /><input type="reset" />
    <input type="button" value="restore" />
</form>
    
    <div id="output"></div>

JavaScript

// u5 = utils
    U5 = {};
    
    /**
     * 加载配置到界面,data-setting属性指定setting项
     * @param setting
     */
    U5['LoadSettingToUI'] = function (setting)
    {
    	$('[data-setting]')
    		.each(function()
    		{
    			var $this = $(this);
    			var val;
    			val = setting[$this.data('setting')];
    			// 根据不同的类型进行值的转换 for jquery mobile
    			if($this.is('select[data-role=slider]'))// 这里没有使用jqmData来判断,考虑兼容问题
    			{
    				$this.val(val?'on':'off');
    			}else if($this.is('[type=checkbox]'))
    			{
    				$this.prop('checked',!!val);
    			}else{
    				$this.val(val);
    			}
    		});
    };
    /**
     * 从页面获取配置,data-setting属性指定setting项
     * @return {object}
     */
    U5['GetSettingFromUI'] = function ()
    {
    	var setting = {};
    	$('[data-setting]').each(function()
    	{
    		var $this = $(this);
    		/**
    		 * @type {string|boolean}
    		 */
    		var val;
    		val = $this.val();
    		// 根据不同的类型进行值的转换
    		if($this.is('[type=checkbox]'))
    		{
    			val = $this.prop('checked');
    		}else if(/^on|off$/.test(val))
    		{
    			val = val === 'on';
    		}
    		//
            
    		setting[$this.data('setting')] = val;
    	});
    	return setting;
    };

///////////////////////////////////////////////////////////////
$('form')
.submit(function(e)
        {
            e.preventDefault();
            localStorage['data']=JSON.stringify(U5.GetSettingFromUI());
        });
$('[value=restore]')
.click(function()
       {
           U5.LoadSettingToUI(JSON.parse(localStorage['data']));
       })