(1) Operation Demonstration
Simultaneously open github.com
in two windows, log in the user in one of the windows, and the
other window displays the need for Reload
to refresh the window, and then performs logout processing
in one window, and the other window will also prompt that Reload is required
(2) Code analysis and
browsing Right-click on the browser to view the source code, and you can see the following code, where "d-none" is to control whether to display the div.
<div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
<svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-
2V6h2v4z"/></svg>
<span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
<span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
</div>
Looking at the source code, you can see that the page introduces a total of 2 JavaScript files:
<script crossorigin="anonymous" integrity="sha256-LrSxxxxx" src="https://assets-cdn.github.com/assets/frameworks-2ebxxxxx.js"></script> <script async="async" crossorigin="anonymous" integrity="sha256-izZxxxxx" src="https://assets-cdn.github.com/assets/github-8b3xxxxx.js"></script>
Continue to view the second JavaScript file and search for "js-stale-session-flash", you can find the following code, it can be seen that it is judged by monitoring whether there is logged-in after the StorageData change StorageEvent event!
window.addEventListener("storage",function(e){if(e.storageArea===localStorage&&"logged-in"===e.key&&e.newValue!==a){a=e.newValue;var n=document.querySelector(".js-stale-session-flash");r["default"](n instanceof HTMLElement,"Flash element must exist and be an HTMLElement"),n.classList.toggle("is-signed-in","true"===a),n.classList.toggle("is-signed-out","false"===a),n.classList.remove("d-none"),
Continue to search for "logged-in" in the second JavaScript file, you can see the following code, it can be seen that it is judged according to the value of the content of <meta name="user-login" content=""> in the head, if there is a value, it is true. In the case of a value: <meta name="user-login" content="rensanning">
!function(){var e=document.querySelector("meta[name=user-login]");if(e instanceof HTMLMetaElement){var n=e.content,a=String(!!n.length);try{localStorage.setItem("logged-in",a)}catch(i){return}
To sum up: Listen to the StorageEvent event of LocalStorage!
There is also a related question on StackOverflow: https://stackoverflow.com/questions/39550656/how-does-github-detect-signing-in-out