Make some changes on the web page after login, in dynamically page

Question

Hello
I have a dynamicly navigation bar in my web page. By saying dynamically I mean that the title and the content of the navigation bar come from the database. I want to make some changes on the web page after successfull login. I have written a function for that and it works properly. The problem is that the changes are made (I have done it with jQuery):
<script type="text/javascript">
console.log("successfull");
$(document).ready(function() {
$(".online-option").append("<p class='online_username'>Hi,&nbsp&nbsp<?php echo $username; ?></p>");
$(".dropdown2").remove();//. dropbtn1
$(".online-option").append("<div><a class='signin_button_a' href='logout.php'>Log Out<i class='fa fa-sign-out' aria-hidden='true'></i></a></div>");
});
</script>
But when I go to another page (from dynamicly navigation bar), the changes that I have made with jQuery disappear.
I am grateful for any answer. Thank you.

Answer 1

Save the state of login in a cookie or in web storage ( localStorage and sessionStorage objects ) using JS/JQuery and put your actual code to each pages, adding to it a conditional test to run it only if the state of login is ok... If you use cookies, you can handle the value on server side, so you can send the header you want, without JS/JQuery for doing it on client side ( unnecessary in this case ;) )

Answer 2

How did you get data from database? If you use php, you can make the nav portion as partial php file, include this partial file in all your pages. Use your php to update the nav items.