使用hashbang处理多个选项卡

Question

我有一个单页应用，可以打开多个标签，每个标签执行不同的操作。但是，如果用户点击刷新或返回，他们会丢失他们正在处理的所有内容。有没有办法，可能结合哈希 - 刘海和饼干，以防止损失？例如，如果用户要刷新，则他们使用的所有选项卡都将被打开。

Answer 1

我建议不要使用cookie，因为它们会给HTTP请求带来不必要的开销。

AmplifyJS为持久数据提供跨浏览器支持，尽可能使用localStorage，并回退到sessionStorage，globalStorage和userData（IE）。

Answer 2

您可能希望使用onbeforeunload事件。在用户“卸载”（刷新/重定向/等）页面之前调用此事件（顾名思义），它允许您警告用户他正在尝试远离具有未保存数据的页面。

window.onbeforeunload = function(e) {
  e = e || window.event;
  var warning = 'You\'ve made changes to this page. Are you sure you don\'t want to save them?';

  if(e) {
    e.returnValue = warning;
  }

  return warning;
}

有关该事件的更详细概述，请参阅MDN Docs。

有很多方法可以保存数据，例如localStorage，IndexedDB，AJAX到服务器和（最后）Cookies。