リフレッシュ（F5 /リフレッシュボタンによる）とクローズブラウザの区別方法は？

Question

私は、ブラウザ上でイベントを処理する必要があります。問題は、私の顧客がそれぞれのイベントごとに異なるロジックを必要としていることです。バックボタンの は、このソリューションは、非常に細かいです：

• https://stackoverflow.com/a/36786695/3462243

が、今ではリフレッシュと近くを区別するのは難しいですが、私が見つけたすべてのソリューションは、「beforeunload」イベントの使用についてです。

• How to know whether refresh button or browser back button is clicked in firefox
• Handle refresh page event with javascript
• https://forums.asp.net/t/1829278.aspx?Detect+Browser+refresh+reload+button+click+in+all+browsersは私がキーボード上のイベントをキャッチすることができ、F5でリフレッシュする
• https://www.quora.com/What-is-the-best-way-to-detect-refresh-event-in-jquery
• https://www.sitepoint.com/community/t/detect-refresh-button-in-the-browser/1119/22

を（これは安定して動作しません）が、ときに、ブラウザ上のユーザのプレス更新ボタンは、私はできません。私が "beforeunload"を使用している場合は、ブラウザの近くのイベントと同じです。

私もこの問題を回避するソリューションが見つかりました：ブラウザが近い場合

• Identifying Between Refresh And Close Browser Actions
• How do I detect a page refresh using jquery?

が、残念ながら、私は何をしたいこと（ページアンロードする前にメッセージを表示されるが表示されなくリフレッシュするとき）

誰もが解決策を知っていますか（クロスブラウザ）

ありがとう

Answer 1

Cookies/window.sessionStorageを使用します。

明示的に有効期限を設定しないでCookieを設定すると、現在のセッション（ブラウザウィンドウを閉じるまで有効）にのみ使用できるようになります。
また、sessionStorageオブジェクトを使用することもできます。これは、1つのセッションにのみデータを格納します。ユーザーが特定のブラウザー・タブを閉じると、データは削除されます。

あなたはこのappraochに従うことができます：
1.Createにクッキーをユーザーが最初に訪問するページdocument.cookie = "userloggedin=true"; ORクッキーが存在しない場合sessionStorage.userLoggedIn = true;

2.Cookieは、リフレッシュ/クローズと再開タブの後に利用できるようになります設定ユーザーがウィンドウを閉じて、再度開いたことを意味します。
同様に、ユーザーがブラウザタブを閉じた後にセッションデータが削除されます

Answer 2

ブラウザのperformance.navigationオブジェクトを使用して、ページへのナビゲーションのタイプを検出できます。

var navigationType = performance.navigation.type; 

if (navigationType === performance.navigation.TYPE_BACK_FORWARD) { 
    console.log("Back/Forward button"); 
} else if (navigationType === performance.navigation.TYPE_RELOAD) { 
    console.log("Reloaded"); 
} else if (navigationType === performance.navigation.TYPE_NAVIGATE) { 
    console.log("Normal navigation"); 
} 

そしてonbeforeunloadイベントは、ブラウザのクローズを検出するためにいつものように使用することができます。ナビゲーション定数の詳細については、this documentationを参照してください。