这是使用 Storage 事件完成的。
基本上,Storage
接口会在受其影响的全局对象上触发 storage
事件。
实际上,在每次生成 GitHub 页面时,GitHub 都会设置一个名为 'user-login
' 的元标记。该值将是当前已登录用户。
例如,如果我查看在 GitHub 中加载的页面的源代码,则源代码包含此行:
<meta name="user-login" content="timgws">
然后,每次页面加载时,会检索内容的值,并将其存储在 LocalStorage 中。使用 jQuery 大致如下:
那么,每当页面加载时,都会使用 jQuery 检索内容的值,并将其存储在 LocalStorage 中。
localStorage.setItem("logged-in", $("meta[name='user-login']").attr("content"));
最后一个魔术技巧是监听storage
事件,如果用户名已更改,则切换flash
类的可见性。
var currentUser = localStorage.getItem("logged-in");
window.addEventListener("storage", function (event) {
if (event.storageArea === localStorage && event.key === "logged-in"
&& event.newValue !== currentUser) {
$('.flash').removeClass('d-none');
}
});
你可能希望添加一些代码来区分用户的登录和退出(这应该很容易,只需比较currentUser
的值即可)