如何让JS只为所有页面调用一次？

Question

我有一个header.html页面，我会通过add_header.js将JavaScript动态加载到我的所有网页中。

header.html包含一个通知徽章，显示带有通知数量的红色范围。

在我的add_header.js我有一个JS功能，可以在点击徽章时删除红色范围。

一切都适用于一个页面，但当我转到另一个页面时，header.html会再次加载，因此通知再次变为红色。

如何解决这个问题，以便所有页面只执行一次函数？

webpage.html

<script src="js/add_header.js"></script>
 <div id="header">
</div>

我的header.html

<div class="bootstrap-iso">
  <li class="nav-item d-md-down-none">
    <a id="notif-link" class="nav-link" href="#" title="Notifications">
     <span id="notif" class="badge badge-pill" style="background-color:red;"></span>
    </a>
  </li>
</div>

我的add_header.js

$(function(){
  $("#header").load("header.html"); 
});

$(document).ready(function(){
 var list_notif=["Notification1","Notification2","Notification3","Notification4"];
 var number_notif=list_notif.length;
 $('#notif').text(number_notif);

 $('#notif-link').focus(
    function(){
      $('#notif').remove(); 
    }); 
});