Showing notification with AJAX - ajax

Question

I have a navbar on my users' panel. A part of the navbar indicates if the user has a new unread message. In this case a badge will appear next to an icon. I've simplified the codes here to make them easier to understand and read.
So this is the simplified HTML code:
<div class="btn-group msg-box">
<i class="fa fa-envelope"></i>
// this is the default state, no badge is shown
</div>
Here is the AJAX request which calls a custom function every 10 seconds:
<script type='text/javascript'>
$(document).ready(function(){
setInterval(checkMsg,10000);
});
function checkMsg(){
$.get('ajax.php',{user_id : <?php echo $user_id; ?>},function(data){
$('.msg-box').html(data);
});
}
</script>
And this is the ajax.php file content:
if(isset($_GET['user_id']){
// a few lines of code here to check if that particular user has any unread message.
// In such case a variable name $newMessage is set to 1. Now ... :
if($newMessage>0){
$data='
<i class="fa fa-envelope"></i>
<span class="badge"><i class="fa fa-info"></i></span>
';
}else{
$data='
<i class="fa fa-envelope"></i>
';
}
echo $data;
}
First of all, I know the way I've written this AJAX request is very rookie, but it works fine anyway, up to one point!
In case the user has a new message, and if they stay on a page, the code runs perfectly and shows the badge. But when the user refreshes the page or goes to another page, even-though they have a new message, that default state is shown again where there's no badge. And I know it's of course because I have specified a default state via HTML codes.
I need to know how I can keep the result of the AJAX request regardless of how many times the user refreshes the page or goes to another page.
UPDATE
I tried storing the query result in a SESSION in my ajax.php file. So instead of $data I wrote $_SESSION['data'].
Back on my HTML I made the following change:
<div class="btn-group msg-box">
<?php
if(!isset($_SESSION['data'])){
?>
<i class="fa fa-envelope"></i>
<?php
}else{
echo $_SESSION['data'];
}
?>
</div>
I made this change because I considered the fact that SESSIONS, by definition, are created and accessed globally within the domain. So once it's set, it can be checked and used on all other pages.
So that only if that SESSION isn't set, the default state should be displayed. But that as well doesn't seem to have my desired result. Still the same thing happens.

Answer 1

Ok, answering my own question now. :)
My UPDATE seemed to be a good idea which I tried.
The problem there was that I had written session_start(); on my main PHP file which was included in all other PHP files of the project.
So I basically thought that when the ajax.php file is called, there's no need to write session_start(); again. Because ajax.php was called inside a PHP file that had session_start(); in it already. So, I was wrong!
Adding session_start(); to the beginning of my code in ajax.php simply fixed the issue.