重新加载后显示 Toast 通知

Question

我希望在页面重新加载后显示一个烤面包通知，告诉用户文件已上传。目前我已经做到了这一点。

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

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

这是toastrtrigger函数()

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

- Dranier

---

toastrTrigger是什么？你期望它像警告框一样阻塞吗？可以分享一下它的代码吗？ - CertainPerformance

是的，这是我脚本中的一个函数。大概就是这样。这是 toaster alerts 的 GitHub 链接：https://github.com/CodeSeven/toastr - Dranier

你能发布一下你的 toastrTrigger 函数本身吗？我相信这是需要的，以便找出解决方案。 - CertainPerformance

@CertainPerformance 我已经更新了帖子，它具有该功能。谢谢。 - Dranier

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检索数据，以确定是否应该显示通知。

- CertainPerformance

---

非常感谢，运行得很好。 - Dranier