重新加载后显示Toast通知

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

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

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

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

最好的选择是将 toastr 消息存储在本地存储中，并在显示后从本地存储中删除。

Answer 2

跨页面重新加载保留 Toast 通知通常涉及将通知数据存储在持久存储机制中，例如 cookie、本地存储或会话存储。这是一个使用 JavaScript 和本地存储的简单示例：

显示Toast通知： 假设您有一个显示 toast 通知的功能。当您想要显示 Toast 通知时，请将通知数据存储在本地存储中。

1. 函数displayToast(消息){ // 显示toast通知 // ...
   // 将通知存储在本地存储中 localStorage.setItem('toastMessage', 消息); }
   检索页面加载时的 Toast 通知： 页面加载时，检查本地存储中是否有存储的通知并显示它。
2. document.addEventListener('DOMContentLoaded', function () { // 从本地存储中检索存储的通知 const storeMessage = localStorage.getItem('toastMessage');
   //如果存在则显示存储的通知 if (存储消息) { displayToast(storedMessage);

    // Optionally, clear the stored notification after displaying
    localStorage.removeItem('toastMessage');

   } });
   此示例使用本地存储，即使用户重新加载页面，本地存储也会保留。但请注意，本地存储对其可存储的数据量有限制（通常在 5 MB 左右），并且不适合敏感数据。

请记住处理用户可能不支持本地存储或禁用本地存储的情况。此外，如果您需要管理多个通知或处理更复杂的场景，请考虑实施更复杂的解决方案。