Fixed panel that can only be closed once

The solution was for the message “We use cookies to enhance your experience in our web site. By visiting it, you agree our Cookies Policy.”

It is important that the panel does not reappear after closing/accepting the agreement. Here is the HTML, CSS, JS code to implement the panel on top of the site.

<div id="panel-bar" class="fixed">
    <p>Text for a fixed bar about cookies or about discounts, the weather etc.
        <a href="#" id="save-panel-example"class="enable-pa"><img style="width: 10px;" src="/img/cross.png" alt="close"></a>
    </p>
</div>

<style>
#panel-bar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

}
#panel-bar {
    line-height: 24px;
    color: #000;
    text-align: center;
    padding: 3px 0;
    width: 100%;
    background-color: #B2E32F;
    display:none;
}
.enable-pa {
    border-radius: 10%;
    margin-left: 100px;
    color: #000;
    padding: 5px;   
    border-radius: 10%;
    font-family: serif;
    text-decoration: none;
    transition: .3s background-color;
 }
.cb-policy {
    color: white;
    text-decoration: underline;
}
.cb-policy:hover {
    color: darkcyan;
}
</style>

<script>
window.onload = function(){
    try {
        if(localStorage.getItem("cookie-enable")!="1"){
            document.getElementById("panel-bar").style.display="block";
        }
        document.getElementById("save-panel-example").addEventListener( "click", function() {
            localStorage.setItem("cookie-enable", "1");
            document.getElementById("panel-bar").style.display="none";
        } );
    } catch( e ) {
        return false;
    }
}
</script>