通知機能が消えてしまう問題

Question

#通知が画面遷移で消えてしまう

一定時間おきにajaxで通信をして通知があった場合にはHeaderのベルマークが光る仕様です。
ヘッダーは全画面で共通

##通知があった場合には画像のようにベルが光る

しかしながら画面遷移をしてしまうとベルマークの色は消えてしまい、
再びajaxから通知を受け取るまでは光りません。
どのようにすれば画面遷移をしてもベルマークを光ったままにできるのでしょうか？

仕様としてベルのマークが消えるのはマークをクリックした時のみとしたいです。
こちらの機能はまだ未実装です。

$(function(){
	var token = $("meta[name='_csrf']").attr("content");
	var header = $("meta[name='_csrf_header']").attr("content");
	$(document).ajaxSend(function(e, xhr, options) {
		xhr.setRequestHeader(header, token);
	});

	//ajax
	function doDataRefresh()
	{
		$.ajax( // promiseを返す
				{
					url:"/checkdb",
					type:"POST"
				})
				.done(function(returnData){
					if(returnData.length > 3) {
						console.log(returnData);
						console.log(returnData.length);
						//ベルを光らせる
						$('#alert').addClass('alert');
					}
				})
				.fail(function(xhr) {console.log('error')});
		return false;
	}


	(function(){
		var t = setInterval(function()
				{
			doDataRefresh(); // 定期的に行いたい処理
				}, 10000); // refresh間隔＝5分＝300秒＝300000ms
	})();

});

.alert {
	color:#fc9d03;
}

##HTMLヘッダー部分

<header class="header">
		<div class="container">
			<div class="container-small">
				<a href="http://localhost:8080/top" class="headA">TOP</a>
				<button type="button" class="headC">
					<span class="fa fa-bars" title="MENU"></span>
				</button>
			</div>
			<nav class="headB">
				<ul>
					<li><a href="http://localhost:8080/top">TOP</a></li>
					<li><a
						href="http://localhost:8080/profile/2">マイページ</a></li>
					<li><a href="http://localhost:8080/profile/messageBox">メッセージ</a></li>
					<li><a href="http://localhost:8080/logout">ログアウト</a></li>
					<li class="alert-wrapper"><i class="far fa-bell" id="alert"></i>
				</ul>
			</nav>
		</div>
	</header>

Answer 1

どこかに「押したかどうか」もっておけば良いのでは。
フロントならWebStorage
バックならDBに既読フラグ

Answer 2

通知が消えてしまうという問題に対しては
画面遷移時にajaxで通信を行うように設定することで解決.
そのほかの場合はポーリングするようにしました。