Prevent a triggering action using a cookie with JavaScript -

in wordpress site have pop window (for email capture) triggered "mouseleave" event.

the pop works fine once info captured or pop window closed dont want bother visitor pop anymore. want set cookie detect event has taken place , not trigger again until week or month later visitor.

here code:

<script>     jquery(document).ready(function() {         jquery('html').one("mouseleave", function(e){             jquery('.backdrop, .box').animate({'opacity': '.50'}, 300, 'linear');             jquery('.box, .box').animate({'opacity': '1.00'}, 300, 'linear');             jquery('.backdrop, .box').css('display', 'block');             jquery( ).off( event );             });             jquery('.close').click(function(){                 jquery('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){                     jquery('.backdrop, .box').css('display', 'none');                     });                 });                 jquery('.close').click(function(){                     close_box();                     });                              jquery('.backdrop').click(function(){                     close_box();                     });     });      function close_box()     {     jquery('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){                     jquery('.backdrop, .box').css('display', 'none');     });     } </script> 

here html:

   <h1>this web page </h1>       <div class="backdrop"></div>    <div class="box"><div class="close">x</div>    <div class="box-content">    light box<br>     <p>some info</p>    </div>    </div> 

and css:

.backdrop {     position:absolute;     top:0px;     left:0px;     width:100%;     height:100%;     background:#000;     opacity:.0;     filter:alpha(opacity=0);     z-index:50;     display:none;     } .box {     position: fixed;     top: 20%;     left:30%;     background: url("box-img.jpg") repeat scroll 0 0 #fff;     z-index:51;     padding:10px;     -webkit-border-radius:5px;     -moz-border-radius:5px;     border-radius:5px;     -moz-box-shadow:0px 0px 5px #444444;     box-shadow:0px 0px 5px #444444;     display:none;     height: 650px;     width: 600px;     }  .close {     float:right;     margin-right:6px;     cursor:pointer;     } 

how can accomplish that?

i've taken liberty of wrapping script in no-conflict closure improve readability , have moved repeated calls jquery object constructor same selector separate variables.

basically use window.localstorage (which built browser , requires no plugins) store information on client side, first check see if cookie set , if is, if older 1 month (or 2628000000 milliseconds)

i put functions inside if statement if user has seen popup nothing @ happen.

_{note: not use cookies, explanation of difference please see:
what difference between localstorage, sessionstorage, session , cookies?}

_{edit: because requested in (deleted) comments need run on separate pages independently i've included object solution this}

(function ($) {     var storage = window.localstorage     $(document).ready(function () {         var poppedpages;         if(!storage.poppedpages) {             poppedpages = {};          } else {             poppedpages = json.parse(storage.poppedpages);         }         if(!storage.popped || !storage.poppedpages[location] || storage.popped - date.now() > 2628000000) {             // 2628000000 === 1 month's worth of milliseconds             storage.popped = date.now();             poppedpages[location] = true; // insert new property current page             var backdropbox = $('.backdrop, .box')              function open_box() {                 $('html').one("mouseleave", function (e) {                     backdropbox.animate({                         'opacity': '.50'                     }, 300, 'linear');                     $('.box, .box').animate({                         'opacity': '1.00'                     }, 300, 'linear');                     backdropbox.css('display', 'block');                 });                 $('.close, .backdrop').one('click', close_box);             }             function close_box() {                 backdropbox.animate({                     'opacity': '0'                 }, 300, 'linear', function () {                     $('.backdrop, .box').css('display', 'none');                 });             }              open_box();         }         storage.poppedpages = json.stringify(poppedpages);     }); })(jquery);