form表单序列化为json对象保存到storage & 及json解析加载到form表单

最新推荐文章于 2024-07-12 11:08:55 发布

白脸包公

最新推荐文章于 2024-07-12 11:08:55 发布

阅读量365

点赞数 3

分类专栏：前端文章标签： json html forms locstorage jquery

本文链接：https://blog.csdn.net/DOODPEOPLE/article/details/114702909

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DEMO

效果

在这里插入图片描述

代码文件

html

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>page1</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="formJson.js"></script>
</head>
<body>
<div><h1>page1</h1></div>
<form id="form">
    <div>工号：<input type="text" name="code"></div>
    <div>姓名：<input type="text" name="name"></div>
    <div>性别：<input type="text" name="sex" placeholder="1|男=>男;2|女=>女;其他"></div>
    <div>爱好：
        <input type="radio" id="hobby_1" name="hobby" value="1"><label for="hobby_1">吃饭</label>
        <input type="radio" id="hobby_2" name="hobby" value="2"><label for="hobby_2">睡觉</label>
        <input type="radio" id="hobby_3" name="hobby" value="3"><label for="hobby_3">打豆豆</label>
    </div>
    <div>水果：
        <input type="checkbox" id="fruit_1" name="fruit" value="01"><label for="fruit_1">苹果</label>
        <input type="checkbox" id="fruit_2" name="fruit" value="02"><label for="fruit_2">香蕉</label>
        <input type="checkbox" id="fruit_3" name="fruit" value="03"><label for="fruit_3">雪梨</label>
        <input type="checkbox" id="fruit_4" name="fruit" value="04"><label for="fruit_4">西瓜</label>
        <input type="checkbox" id="fruit_5" name="fruit" value="05"><label for="fruit_5">桔子</label>
    </div>
    <div>生日: <input type="date" name="birthday"></div>
    <div>密码: <input type="password" name="password"/></div>
    <div>比例:<input type="range" name="rate"> <span id="rate_text"></span>
    </div>
    <div>备注：<textarea rows="3" name="memo"></textarea></div>
</form>
<div>
    <button onclick="submitToNextPage()">保存并跳转至下一页</button>
    <button onclick="submitForm()">直接保存当前页</button>
</div>
<script>
    let storageItemName = "nl-formJson";

    $(function () {
        // json信息加载到form表单中
        loadStorageJsonToForm({item : storageItemName});

        // 定时器显示rang类型字段,实际使用没有此类型值可去除此段代码
        setInterval(function() {
            $("#rate_text").text($(form).find("[name='rate']").val() + "%");
        }, 0.01);
    });

    /** 提交当前页表单，并跳转到下一页 */
    function submitToNextPage() {
        serialFormJsonToStorage(
            {
                item : storageItemName,
                handle : function (obj) {
                    switch (obj.sex) {
                        case "" : obj.sex = ""; break;
                        case "1" : case "男" : obj.sex = "男"; break;
                        case "2" : case "女" : obj.sex = "女"; break;
                        default : obj.sex = "其他";
                    }
                }
            }
        );
        window.location = "page2.html";
    }

    /** 提交当前页表单 */
    function submitForm() {
        let json = $("#form").serializeJson();
        console.log(json);
    }
</script>
</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>page2</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="formJson.js"></script>
</head>
<body>
<div><h1>page2</h1></div>
<form id="form">
    <div>年龄：<input type="text" name="age"></div>
    <div>地址：<input type="text" name="address"></div>
</form>
<div>
    <button onclick="submitToPrevPage()">保存并返回上一页</button>
    <button onclick="submit()">保存提交</button>
</div>
<script>
    let storageItemName = "nl-formJson";
    let json;

    $(function () {
        // json信息加载到form表单中
        loadStorageJsonToForm({item : storageItemName});
    });

    /**
     * 保存表单数据
     */
    function saveFormData() {
        json = serialFormJsonToStorage( {item : storageItemName} );
    }

    /**
     * 保存返回上一页
     */
    function submitToPrevPage() {
        saveFormData();
        window.location = "page1.html";
    }

    /**
     * 保存提交
     */
    function submit() {
        saveFormData();
        // 最后一步提交后需要移除storageItemName,避免影响下一次表单填写的json信息
        window.localStorage.removeItem(storageItemName);
    }
</script>
</body>
</html>

js

formJson.js

/**
 * 表单序列化成json格式
 * 可处理未选中的radio和checkBox
 * 注:此方法中checkBox值存储非Array格式,而是用逗号分隔合并
 */
$.fn.serializeJson = function () {
    let json = {};
    $.each(this.serializeArray(), function(index, field) {
        if(json[field.name]) {
            json[field.name] += ("," + field.value);
        } else {
            json[field.name] = field.value;
        }
    });
    let $radioCheck = $('input[type=radio],input[type=checkbox]', this);
    $.each($radioCheck, function(){
        if(!json.hasOwnProperty(this.name)) {
            json[this.name] = '';
        }
    });
    return json;
};

/**
 * 序列化表单为json信息保存到storage中
 * @param obj
 * @returns json对象
 */
function serialFormJsonToStorage(obj) {
    // 获取storage中item名和json对象
    let storageItemName = obj.item || "defaultStorageFormJson";
    let storageJson = JSON.parse(window.localStorage.getItem(storageItemName) || "{}");

    // form表单id值
    let formId = obj.formId || "form";
    // 合并本次form表单序列化json结果到storageJson中
    $.extend(storageJson, $("#" + formId).serializeJson());

    // 数据处理函数,可处理需要特殊解析的值
    if (obj.handle) {
        obj.handle(storageJson);
    }
    // 把json信息保存入storage中
    window.localStorage.setItem(storageItemName, JSON.stringify(storageJson));
    return storageJson;
}

/**
 * 解析storage中json对象并加载到对应form表单
 * @param obj
 */
function loadStorageJsonToForm(obj) {
    let storageItemName = obj.item || "defaultStorageFormJson";
    let formId = obj.formId || "form";
    let handle = obj.handle;

    // storage中json对象
    let storageJson = JSON.parse(window.localStorage.getItem(storageItemName) || "{}");
    // 本次待加载form对象
    let formObj = $("#" + formId);

    // 控制台输出json，实际使用可注释或删除
    console.log(storageJson);

    // 数据处理函数，json数据加载前处理
    if (handle) {
        handle(storageJson);
    }
    // 加载json信息到form表单中
    loadJsonToForm(formObj, storageJson);
}

/**
 * 加载json信息到form表单中
 * @param formObj form表单对象
 * @param json 待解析json对象
 */
function loadJsonToForm(formObj, json) {
    $.each(json, function (name, value) {
        switch (formObj.find(":input[name=" + name + "]").attr("type")) {
            case "checkbox":
                // 数组格式
                if (Object.prototype.toString.apply(value) == '[object Array]') {
                    for (var i = 0; i < value.length; i++) {
                        if ($(this).val() == value[i])
                            $(this).attr("checked", "checked");
                    }
                } else { // 非数组格式，本demo中使用的是此格式
                    let valueArray = value.split(",");
                    formObj.find("[name=" + name + "]").each(function () {
                        for (var i = 0; i < valueArray.length; i++) {
                            if ($(this).val() == valueArray[i]) {
                                $(this).attr("checked", "checked");
                            }
                        }
                    });
                }
                break;
            case "radio":
                formObj.find("[name=" + name + "]").each(function () {
                    if ($(this).val() == value) {
                        $(this).attr("checked", "checked");
                    }
                });
                break;
            case "textarea":
                formObj.find("[name=" + name + "]").html(value);
                break;
            default:
                formObj.find("[name=" + name + "]").val(value);
        }
    });
}

说明

使用说明

先访问 page1.html

代码说明

html
- demo中头部引用的jquery为cdn形式<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> ，实际使用可换成系统本地的jquery.js
- page1.html中 性别 设置成文本框是为了演示回调方法
  - 当未输入值，最终值为空
  - 当输入 1 或 男 ，最终值为 男
  - 当输入 2 或 女 ，最终值为 女
  - 除了以上3中情况，最终值为 其他
js
- function serialFormJsonToStorage(obj) 和 function loadStorageJsonToForm(obj)
  - obj说明
    - item storage存储域的item项名称；不传则默认为 defaultStorageFormJson
    - form form表单的id值；不传则默认为 form
    - handle
      - serialFormJsonToStorage 中是form序列化之后再执行，得出函数处理过后的json，最终存储到storage中
      - loadStorageJsonToForm 中是加载信息到form前执行，得出函数处理过后的json，再解析加载到form表单中
- 此demo中storage采用的是window.localStorage，实际使用可选择是否更换

白脸包公

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
form表单序列化为json对象保存到storage & 及json解析加载到form表单

DEMO效果代码文件htmlpage1.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>page1</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script&
复制链接

扫一扫

专栏目录