I am trying to find a way how to store form data in local storage to show them even if user refresh page. For whole form it is no problem, but I have object with image files as part of form and I am not able to find the way how to store it.
My data object is for ex. like this:
{file_9wyh8: File, file_cwjg0: File}
My output after get data from localstorage is without files:
{file_9wyh8: {…}, file_cwjg0: {…}}
I need to store data object bcz, there are files ordered as user see them on page. Due to this it is not possible to use directly filereader.
And this is my code:
// The unload event is sent to the window element when the user navigates away from the page for ex. page refresh
$(window).on('unload', function() {
// Save values of form fields to local storage
$(':file, :checkbox, select, textarea, input').each(function() {
// Due to JS added input instead of select, need to get value from input + add to storage just checked items
if ( !$(this).hasClass('add-item__select') && !$(this).is(':checkbox') && !$(this).is(':file') ) {
// Save value of field to local storage
localStorage.setItem($(this).attr('name'), $(this).val());
} else if ( $(this).is(':checked') && !$(this).is(':file') ) {
// Save just name of checkbox which is checked
localStorage.setItem($(this).attr('name'), $(this).val());
} else if ( $(this).is(':file') ) {
dataToString = JSON.stringify(data);
localStorage.setItem('file', dataToString);
}
})
});
// Get values form local storage if page is refreshed
$(window).on('load', function() {
// Save values of form fields to local storage
$(':file, :checkbox, select, textarea, input').each(function() {
// If input has this class then do not save value
if ( !$(this).hasClass('add-item__select') && ( !$(this).is(':checkbox' ) && !$(this).is(':file') ) ) {
// Get value of field
fieldValue = localStorage.getItem($(this).attr('name'));
// Show value of field if fieldValue is not empty
if (fieldValue !== 'null') $(this).val(fieldValue);
$(this).addClass('black-text');
// Done action just for checkbox
} else if ( $(this).is(':checkbox') && !$(this).is(':file') ) {
// Get value of field
fieldValue = localStorage.getItem($(this).attr('name'));
// If chekcbox name is same as saved in local storage then set as checked
if ( fieldValue === $(this).val() ) $(this).prop('checked', true);
// Remove checkbox value in localstorage each time - bcz of change checked checkboxes
localStorage.removeItem(fieldValue);
} else if ( $(this).is(':file') ) {
// Get whole object data from localstorage
var dataStringFromLocalStorage = localStorage.getItem('file');
var dataFromLocalStorage = JSON.parse(dataStringFromLocalStorage);
console.log(dataFromLocalStorage);
$.each(dataFromLocalStorage, function(index, value) {
/*
// create temp url to img object for creating thumbnail and append img with temp src to thumbnail__wraper div
$('.thumbnail__wrapper').append('<div class="thumbnail" id="file_'+ mark +'"><img class="imageThumb" src="' + url + '" title="' + upload.name + '"/><br/><a class="remove">Zmazať</a></div>');
$('.add-item__add-photo-btn-area').find('p').hide();
// set up first image as main image - marked by label
var firstImg = $('.thumbnail__wrapper').children().first();
$('<p class="main-img">Hlavná fotka</p>').appendTo(firstImg);
// Change photo number status
$('#photo-num').text('Fotky ' + count + '/50');
*/
})
}
})
I tried also alternatives found in this question, but it did not help me. How can I serialize an input File object to JSON?
