Why localStorage.clear() is not working inside function?-CodePudding

I created form where are filled data storaged to localstorage and I want to delete them if form is submitted. But it is not working inside this function.

If I use it outside of this function, it is working well.

What can be problem?

// Send formData to upload.php
form.on('submit', function() {
  event.preventDefault();

  if (checkFieldsIfNotEmpty() == true) {
    var formDataFields = form.serializeArray(), // Get all data from form except of photos
      count = Object.keys(data).length; // count fields of object

    // Fill formData object by data from form
    $.each(formDataFields, function(index, value) {
      if (value.name === 'category' || value.name === 'subcategory' || value.name.indexOf('filter') >= 0) {
        // do nothing
      } else {
        formData.append(value.name, value.value); // add name and value to POST data
      }
    });

    // foreach - fill formData with category, subcategory and filters names/values from form
    $('.add-item__input-select').each(function(index, value) {
      formData.append($(this).attr('name'), $(this).attr('id'));
    });

    // foreach - fill formData with photos from form
    $.each(data, function(index, value) {
      formData.append('files[]', value);
    });

    uploadData(formData); // send data via ajax to upload.php

    // Clear loaclstorage
    window.localStorage.clear();
  }
});

If I click on submit the it redirects me from form page to item page. and if I go back I can see data from localstorage again on fomr page. I added code which have some connection with localstorage. Maybe there is some problem. On form page is nothing important

/* SAVE FORM DATA TO LOCAL STORAGE - presistent - saved until submit is not clicked  */

// 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') ) {

            // Save value of field to local storage
            localStorage.setItem($(this).attr('name'), $(this).val());

        } else if ( $(this).is(':checked') ) {

            // Save just name of checkbox which is checked
            localStorage.setItem($(this).attr('name'), $(this).val());

        }
    })
});

// 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() {

        // Set values for input elements
        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.length !== 0) {
                // Fill value of element by value from from localstorage - all filled fileds must have class counted to be not conted again
                $(this).val(fieldValue).addClass('black-text counted');

                // Add label, bcz it is checked just on focusout event
                $('<label >'   $(this).attr('placeholder')   '</label>').insertBefore($(this));
                $('.add-item__form-label-JS').css({color: '#888'});
            }

        // Done action just for checkbox
        } else if ( $(this).is(':checkbox') ) {

            // Get value of field
            fieldValue = localStorage.getItem($(this).attr('name'));

            // All filled fileds must have class counted to be not conted again
            // If chekcbox name is same as saved in local storage then set as checked
            if ( fieldValue === $(this).val() ) {
                $(this).prop('checked', true);
                $(this).parent().parent().addClass('counted');
            }

            // Remove checkbox value in localstorage each time - bcz of change checked checkboxes
            localStorage.removeItem(fieldValue);

        }
    })
});

CodePudding user response：

You are saving when unloading the page.

To solve:

let submitting = false;
$(window).on('unload', function() {
if (!submitting) {
  // Save values of form fields to local storage

form.on("submit", function(e) { 

  uploadData(formData); // send data via ajax to upload.php
  // in PRINCIPLE you should move the clear AND setting submitting to the success of the ajax
  // Clear localstorage
  window.localStorage.clear();
  submitting = true;

BUT

WHY are you redirecting in uploadData? WHY not just SUBMIT the form to the server and redirect in the response from the server using a header directive???