複数のタブをハッシュバンで扱う

Question

私は、複数のタブを開いて、それぞれのタブでさまざまな操作を行うことができる単一のページアプリを持っています。ユーザーがリフレッシュまたはバックをヒットした場合、ユーザーは作業中のすべてを失います。損失を防ぐために、おそらくハッシュバングとクッキーを組み合わせた方法がありますか？たとえば、ユーザーが更新する場合、使用していたすべてのタブがバックアップされます。

Answer 1

クッキーに対しては、HTTPリクエストに対する不要なオーバーヘッドが発生するため、これをお勧めします。

AmplifyJSはsessionStorage、globalStorageとuserDataにフォールバック（IE）と、localStorage可能であればを使用して、永続的なデータのクロスブラウザのサポートを提供します。

Answer 2

おそらくonbeforeunloadイベントを使用します。このイベントは、ユーザーがページをアンロード（リフレッシュ/リダイレクト/ etc）する直前に（名前が示すように）呼び出され、保存されていないデータからページから離れようとしていることをユーザーに警告できます。

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の多くがあります。