使用LocalStorage 实现本地保存草稿功能 |
您所在的位置：网站首页 › 表单实时保存 › 使用LocalStorage 实现本地保存草稿功能 |
|
使用LocalStorage 实现本地保存草稿功能
业务需求：表单填写，未提交，在意外退出的情况下，保存当前操作的表单内容，再次打开数据仍在。 实现方法：使用HTML5可以在本地存储用户的浏览数据，采用客户端存储数据对象localStorage 优点: 早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能. localStorag 能长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。 copy公司同事写的代码 /保存数据到localStorage / /** * 当修改表单数据时触发，表单数据自动存储到localStorage * @param storageName storage名称 * @param pageFormId 表单form的id */ function initLocalStorage(storageName, pageFormId){ $("#"+pageFormId+" input").on("blur", function(){ //输入框 setLocalStorage(storageName, pageFormId); }) $("#"+pageFormId+" textarea").on("blur", function(){ //文本框 setLocalStorage(storageName, pageFormId); }) $("#"+pageFormId+" select").on("change", function(){ //下拉框 setLocalStorage(storageName, pageFormId); }) $(".aykj_m_choose li").on("click", function(){ //选择框 setLocalStorage(storageName, pageFormId); }) } /** * 存储到localStorage * @param storageName storage名称 * @param pageFormId 表单form的id */ function setLocalStorage(storageName, pageFormId){ localStorage.setItem(storageName, $("#"+pageFormId).serialize().replace(/\+/g, " ")); } /** * 获取localStorage填充表单数据 * @param storageName storage名称 * @param pageFormId 表单form的id * @param uploadCgformAndDl 附件的上传类型和dl容器id */ function getLocalStorage(storageName, pageFormId, uploadCgformAndDl){ var localStorage_data = decodeURIComponent(localStorage.getItem(storageName)); console.log("localStorage_data====="+localStorage_data) if(localStorage_data!=null && localStorage_data!="null" && localStorage_data!="" && localStorage_data!=undefined){ var pictureCount = 0; //图片数量 var annexCount = 0; //所有附件数量 var localStorage_dataArr = localStorage_data.split("&"); for(var i=0; i= fileNumLimit){ alert("上传的文件数量不能超过" + fileNumLimit); return false; } var $li = $( '' + '' + '' + '' + ''+ ''+ ''+ ''+ ''+ ''+ ''+ '' + file.name + '' + '' ), $img = $li.find('.imgWrap').find("img"); $img2 = $li.find('.picSwiperhtml').find("img"); // $list为容器jQuery实例 //$list.prepend( $li ); $list.find(".uploaderBt").before( $li ); // 创建缩略图，如果为非图片文件，可以不用调用此方法。 thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('不能预览'); return; } $img.attr( 'src', src ); $img2.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程中创建进度条实时显示 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复创建 if ( !$percent.length ) { $percent = $('').appendTo( $li ).find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); uploader.on( 'uploadSuccess', function( file, response ) { response = eval('('+response+')'); $( '#'+file.id ).addClass('upload-state-done'); $( '#'+file.id ).append(""); setLocalStorage(storageName, pageFormId); //存储localStorage }); uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('').appendTo( $li ); } }); uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); }); uploader.on( 'error', function( type ) { if (type == "Q_EXCEED_NUM_LIMIT") { alert("上传的文件数量不能超过" + fileNumLimit); } else if (type == "Q_EXCEED_SIZE_LIMIT") { alert("上传的文件大小不能超过" + fileSingleSizeLimit/1024 + "KB"); } else if (type == "Q_TYPE_DENIED") { alert("不支持这种文件类型"); } else if (type == "F_EXCEED_SIZE") { alert("上传的文件大小不能超过" + fileSingleSizeLimit/1024 + "KB"); } else if (type == "F_DUPLICATE") { alert("已经上传过了！"); } else { alert(type); } }); } /** * 删除，并存储localStorage */ function removeUploadFile_storage(obj) { var parentObj = obj.parent().parent(); var id = parentObj.attr("id"); if(id.indexOf('WU_FILE') != -1){ id = ''; } var fileData = parentObj.find("input").val(); try{ //console.log('removeUploadFile=='+id) jQuery.ajax({ type:'post', dataType:'text', url:'cgUploadController.do?deleteAnnex', data: 'cgUploadId='+id+'&fileData='+fileData+'&t='+new Date().getTime(), success:function(data){ } }); } catch (e){ } parentObj.remove(); //存储localStorage var storageName = parentObj.attr("storageName"); var pageFormId = parentObj.attr("pageFormId"); setLocalStorage(storageName, pageFormId); //存储localStorage } //方法调用 $(function(){ initImageMbUploader_storage("imagesPicker1", "imagesList1", 5*1024*1024*1024*1024, 30, "jpg,JPG,jpeg,JPEG,gif,GIF,png,PNG", "image/*", "t_test", "image_path", "tTestForm_mobile_add_storage", "t_test_form"); }) /** * 上传文件成功后，存储form表单的localStorage */ function initFileMbUploader_storage(pickBtn, showList, fileSingleSizeLimit, fileNumLimit, extensions, mimeTypes, cgformName, cgformField, storageName, pageFormId) { var BASE_URL = "plug-in/webuploader"; var $list = $("#" + showList); var state = "pending"; var datas = {cgformName: ""+cgformName, cgformField: ""+cgformField}; var uploader = WebUploader.create({ auto: true, swf: BASE_URL + '/Uploader.swf', server: 'cgUploadController.do?manage', pick: '#' + pickBtn, resize: false, formData: datas, fileVal: "file", //fileNumLimit: fileNumLimit, duplicate: true, //可重复上传 fileSingleSizeLimit: fileSingleSizeLimit, compress: false, accept: { title: 'file', extensions: extensions, mimeTypes: mimeTypes } }); // 当有文件被添加进队列的时候 uploader.on( 'fileQueued', function( file ) { //限制上传数量 var numLimit = $list.children('dd').length; if(numLimit >= fileNumLimit){ alert("上传的文件数量不能超过" + fileNumLimit); return false; } $list.prepend( '' + '' + '' + file.name + ''+((file.size)/(1024*1024)).toFixed(2)+'MB' + '' + '' + '' + '等待上传...' + '' ); $img = $list.find('img'); $img.attr("src", "plug-in/webuploader/icons/annex.png"); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if ( !$percent.length ) { $percent = $('' + '' + '' + '').appendTo( $li ).find('.progress-bar'); } var fs=(percentage * 100).toFixed(2); $li.find('div.state').text('上传中'+fs+ '%'); $percent.css( 'width', percentage * 100 + '%' ); }); uploader.on( 'uploadSuccess', function( file, response ) { response = eval('('+response+')'); $( '#'+file.id ).find('div.state').text('已上传'); $( '#'+file.id ).append(""); setTimeout(function () { $('#'+file.id ).find('div.state').fadeOut(); }, 500); $img = $list.find('img'); $img.attr("src", "plug-in/webuploader/icons/annex.png"); setLocalStorage(storageName, pageFormId); //存储localStorage }); uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).find('div.error').text('上传出错'); }); uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').fadeOut(); }); uploader.on( 'error', function( type ) { if (type == "Q_EXCEED_NUM_LIMIT") { alert("上传的文件数量不能超过" + fileNumLimit); } else if (type == "Q_EXCEED_SIZE_LIMIT") { alert("上传的文件大小不能超过" + fileSingleSizeLimit + "字节"); } else if (type == "Q_TYPE_DENIED") { alert("不支持这种文件类型"); } else if (type == "F_EXCEED_SIZE") { alert("上传的文件大小不能超过" + fileSingleSizeLimit + "字节"); } else if (type == "F_DUPLICATE") { alert("已经上传过了"); } else { alert(type); } }); } /** * 删除，并存储localStorage */ function removeUploadFile_storage(obj) { var parentObj = obj.parent().parent(); var id = parentObj.attr("id"); if(id.indexOf('WU_FILE') != -1){ id = ''; } var fileData = parentObj.find("input").val(); try{ //console.log('removeUploadFile=='+id) jQuery.ajax({ type:'post', dataType:'text', url:'cgUploadController.do?deleteAnnex', data: 'cgUploadId='+id+'&fileData='+fileData+'&t='+new Date().getTime(), success:function(data){ } }); } catch (e){ } parentObj.remove(); //存储localStorage var storageName = parentObj.attr("storageName"); var pageFormId = parentObj.attr("pageFormId"); setLocalStorage(storageName, pageFormId); //存储localStorage } //方法调用 $(function(){ initFileMbUploader_storage("filePicker1", "fileList1", 5*1024*1024*1024*1024, 10, "zip,rar,doc,docx,xls,xlsx,pdf,PDF,ppt,pptx", "all/*", "t_test", "file_path", "tTestForm_mobile_add_storage", "t_test_form"); }) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |