重新加载后显示吐司通知

Question

我想在页面重新加载后显示一个 toast 通知，说明文件已上传。这是我到目前为止所得到的

_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);
        }
      });
    }
  });
}

这只会刷新页面而不显示通知

这是 toasttrrigger 函数()

_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);
        }
      });
    }
  });
}

Answer 1

重新加载页面后脚本不会保留：一旦文档关闭，与文档关联的所有脚本都会随之消失。没有办法解决这个问题。您必须以某种方式将信息传递到您完全通过 URL 导航到的页面。

一种解决方案是将查询字符串传递给重新加载的页面：

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

然后，在同一页面上，在页面加载时，检查是否存在查询字符串：

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');
}

另一种解决方案是将数据保存在sessionStorage 中，并在页面加载时从 sessionStorage 检索数据以确定是否应显示通知。