Show toast notification after reloading

Question

I want to show the a toast notification after the page is reloaded that says that the file is uploaded. This is what I got so far

_fileUploads.delete = function(reload_on_return) {
  var filtered = root.fileUploads().filter(_ => _._id() == _fileUploads._id());
  var index = root.fileUploads.indexOf(filtered = filtered[0]);
  filtered = ko.toJS(filtered);

  swal({
    text: 'Are you sure you want to delete this file?',
    buttons: true,
    dangerMode: true,
    icon: 'warning'
  }).then(function (allowDelete) {
    if (allowDelete) {
      $.ajax({
        type: 'DELETE',
        url: '/api/gridfs/files/' + filtered._id,
        statusCode: {
          204: function(response) {
            toastrTrigger('The File has been Deleted')
            if (reload_on_return) {
              setTimeout( function() {
                location.reload();
              }, 0001);    
            }
          }
        },
        error: function (xhr, status, error) {
          console.log(xhr);
        }
      });
    }
  });
}

This only refreshes the page and not show the notification

This is the toastrtrigger function()

function toastrTrigger(message, title, type) {
  setTimeout(function() {
    toastr.options = {
      closeButton: true,
      progressBar: true,
      showMethod: 'slideDown',
      timeOut: 4000
    };
    toastr[type || "success"](message, title || 'File Uploads Repository');
  }, 500);
}

Answer 1

Scripts do not persist after the page has been reloaded: once the document is closed, all scripts associated with the document go away with it. There's no way around that. You'll have to somehow pass information to the page you navigate to purely through the URL.

One solution is to pass a query string to the reloaded page:

if (reload_on_return) {
  window.location.href = window.location.pathname + '?deleteSuccess=1';
}

Then, on the same page, on page load, do a check to see if a query string are present:

const { search } = window.location;
const deleteSuccess = (new URLSearchParams(search)).get('deleteSuccess');
if (deleteSuccess === '1') {
  // The page was just reloaded, display the toast:
  toastrTrigger('The file has been deleted');
}

Another solution is to save the data in sessionStorage instead, and retrieve data from sessionStorage on page load to identify whether a notification should be displayed.