jQuery: usare il web storage per implementare il banner della cookie policy

Possiamo usare il web storage come alternativa ai cookie per implementare il banner della cookie policy con jQuery.

Per prima cosa creiamo la struttura HTML del banner:

<!-- contenuto della pagina -->
<div id="policy">
  <div id="policy-content">
    <!-- testo della policy -->
  </div>
  <div id="policy-actions">
      <button type="button" id="policy-accept">Accetto</button>
      <button type="button" id="policy-close">Chiudi</button>
  </div>
</div>
</body>
</html>

Definiamo il layout di base del banner:

#policy {
    width: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 3em 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000000;
    display: none;
}

Quindi definiamo il codice jQuery:

(function( $ ) {
    $.fn.cookiePolicy = function( options ) {
        options = $.extend({
           acceptBtn: "#policy-accept",
           closeBtn: "#policy-close",
           onAccept: function() {},
           onClose: function() {},
           key: "privacy-accepted",
           value: "1"
        }, options);

        return this.each(function() {
            var $element = $( this );
            var $accept = $element.find( options.acceptBtn );
            var $close = $element.find( options.closeBtn );

            $accept.click(function() {
                localStorage.setItem( options.key, options.value );
                $element.fadeOut();
                options.onAccept( $element );
                return false;
            });

            $close.click(function() {
                localStorage.setItem( options.key, options.value );
                $element.fadeOut();
                options.onClose( $element );
                return false;
            });

            if( localStorage.getItem( options.key ) === null ) {
                $( "html, body" ).scrollTop( 0 );
                $element.fadeIn();
            }
        });
    };
})( jQuery );

Esempio d'uso:

$(function() {
    $( "#policy" ).cookiePolicy();
});