使用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<localStorage_dataArr.length; i++){
var s = localStorage_dataArr[i];
if(s.substring(0, s.indexOf("=")) != "annexes"){
var _name = s.substring(0, s.indexOf("="));
var _value = s.substring(s.indexOf("=")+1);
$("#"+pageFormId+" input[name='"+_name+"']").val(_value); //设置输入框
$("#"+pageFormId+" textarea[name='"+_name+"']").val(_value); //设置文本框
var _select = $("#"+pageFormId+" select[name='"+_name+"']"); //设置下拉框
_select.find("option").each(function(){
if($(this).val() == _value){
$(this).attr("selected", "selected").siblings().removeAttr("selected"); //下拉框选中
$(this).parent().siblings("#"+_select.attr("id")+"_dummy").val($(this).text()); //下拉框input
}
})
}else{ //图片和附件
var annex = s.substring(s.indexOf("=")+1);
var annexJson = JSON.parse(annex);
var cgformName = annexJson.cgformName;
var cgformField = annexJson.cgformField;
var _str = "$"+cgformName+","+cgformField+",";
var _index = uploadCgformAndDl.indexOf(_str);
if(_index != -1){
var ext = annexJson.extend.toLowerCase(); //附件后缀名
var annexHtml = handleAnnex_storage(annexJson, storageName, pageFormId, pictureCount, annexCount);
var _li = $("#"+uploadCgformAndDl.substring(_index+_str.length, uploadCgformAndDl.indexOf("$", _index+1)));
if(ext=="jpg" || ext=="jpge" || ext=="png" || ext=="gif"){
_li.find(".uploaderBt").before(annexHtml);
pictureCount++;
}else{
_li.prepend(annexHtml);
}
annexCount++;
}
}
}
}
}
/**
* 处理图片和附件，根据上传控件结构拼接
* {"message":"11","statusCode":200,"filesize":"191355","extend":"png","cgformField":"image_path","sortvalue":0,"attachmenttitle":"45a2aa02f5171d49668e77238ced2641.png","realpath":"temp/1561083330813.png","cgformName":"t_test"}
*/
function handleAnnex_storage(annexJson, storageName, pageFormId, pictureCount, annexCount){
var _html = "";
var showImage = "";
var ext = annexJson.extend.toLowerCase();
if(ext=="jpg" || ext=="jpge" || ext=="png" || ext=="gif"){
showImage = annexJson.realpath;
}else if(ext=="flv" || ext=="mp4" || ext=="mpge4"){
showImage = "plug-in/webuploader/icons/video.png";
}else{
showImage = "plug-in/webuploader/icons/annex.png";
}
if(ext=="jpg" || ext=="jpge" || ext=="png" || ext=="gif"){
_html = "<dd id='WU_FILE_"+ annexCount +"' class='file-item thumbnail upload-state-done' storageName='"+ storageName +"' pageFormId='"+ pageFormId +"'>"
+ "<div class='file-panel'><span class='removeFileListener_storage ylgs icon-guanbi6'></span></div>"
+ "<div class='imgWrap' οnclick='photoView(this,"+ pictureCount +")'><p><img src='"+ showImage +"'></p>"
+ "<div class='picSwiperhtml' style='display:none'><div class='swiper-zoom-container'><img src='"+ showImage +"' class='swiper-lazy'></div></div>"
+ "</div>"
+ "<div class='info'>"+ annexJson.attachmenttitle +"</div>"
+ "<input type='hidden' name='annexes' value='"+ JSON.stringify(annexJson) +"'></dd>";
}else{
_html = "<dd id='WU_FILE_"+ annexCount +"' class='file-item thumbnail' storageName='"+ storageName +"' pageFormId='"+ pageFormId +"'>"
+ "<div class='imgWrap'><p><img width='136px' src='"+ showImage +"'></p></div>"
+ "<div class='info'><span>"+ annexJson.attachmenttitle +"</span><em>"+ ((annexJson.filesize)/(1024*1024)).toFixed(2) +"MB</em></div>"
+ "<div class='file-panel'><span class='removeFileListener_storage ylgs icon-guanbi6'></span></div>"
+ "<div class='state' style='display: none;'>已上传</div>"
+ "<div class='progress progress-striped active' style='display: none;'><div class='progress-bar' role='progressbar' style='width: 100%;'></div></div>"
+ "<input type='hidden' name='annexes' value='"+ JSON.stringify(annexJson) +"'></dd>";
}
return _html;
}
/**
* 删除localStorage
* @param storageName storage名称
*/
function delLocalStorage(storageName){
localStorage.removeItem(storageName);
}
//方法调用
//表单数据自动存储到localStorage
initLocalStorage("tTestForm_mobile_add_storage", "t_test_form");
//获取localStorage填充表单数据
getLocalStorage("tTestForm_mobile_add_storage", "t_test_form", "$t_test_form,image_path,imagesList1$t_test_form,file_path,fileList1$");
在浏览器中查看LocalStorage，存储的数据
补充内容
公司处理图片、附件等使用的是百度上传控件，图片、附件单独处理（其实就是找规律，拼接内容）
/**
* 上传图片成功后，存储form表单的localStorage
*/
function initImageMbUploader_storage(pickBtn, showList, fileSingleSizeLimit, fileNumLimit, extensions, mimeTypes, cgformName, cgformField, storageName, pageFormId) {
var BASE_URL = "plug-in/webuploader";
var $list = $("#" + showList);
var state = "pending";
var thumbnailWidth = 1; //120
var thumbnailHeight = 1; //120
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;
}
var $li = $(
'<dd id="' + file.id + '" class="file-item thumbnail" storageName="'+storageName+'" pageFormId="'+pageFormId+'">' +
'<div class="file-panel">' +
'<span class="removeFileListener_storage ylgs icon-guanbi6" οnclick="removeUploadFile_storage($(this))"></span>' +
'</div>' +
'<div class="imgWrap" οnclick="photoView(this,'+numLimit+')"><p><img src="" class="swiper-lazy"></p>'+
'<div class="picSwiperhtml">'+
'<div class="swiper-zoom-container">'+
'<img src="" class="swiper-lazy">'+
'</div>'+
'</div>'+
'</div>'+
'<div class="info">' + file.name + '</div>' +
'</dd>'
),
$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('<span>不能预览</span>');
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 = $('<p class="progress"><span></span></p>').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("<input type='hidden' name='annexes' value='"+response.jsonData+"' />");
setLocalStorage(storageName, pageFormId); //存储localStorage
});
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').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(
'<dd id="' + file.id + '" class="file-item thumbnail" storageName="'+storageName+'" pageFormId="'+pageFormId+'">' +
'<div class="imgWrap"><p><img width="136px"></p></div>' +
'<div class="info"><span>' + file.name + '</span><em>'+((file.size)/(1024*1024)).toFixed(2)+'MB</em></div>' +
'<div class="file-panel">' +
'<span class="removeFileListener_storage ylgs icon-guanbi6" οnclick="removeUploadFile_storage($(this))"></span>' +
'</div>' +
'<div class="state">等待上传...</div>' +
'</dd>'
);
$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 = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').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("<input type='hidden' name='annexes' value='"+response.jsonData+"' />");
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");
})
扫一扫
2323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
