JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

HTML

<label for="expsecs">Cookie expiration in seconds:</label>
<input type="text" id="expsecs" value="25" />
<br />
<label for="usersName">Your Name:</label>
<input type="text" id="usersName" />
<br />
<button id="setcookie">set cookie</button>
<button id="getcookie">get cookie</button>
<div id="cookiestatus">Cookie Status Here</div>
<div id="theUsersName">User's Name Here</div>

JavaScript

function set_cookie() {
    var secs = parseInt($('#expsecs').val(), 10);
    var usersName = $('#usersName').val();
    if (isNaN(secs)) {
        secs = 25;
    }

    var status = '';
    document.cookie = setCookie('cookieUsersName', usersName, secs);
    if (document.cookie && getCookie('cookieUsersName')) {
        status = 'Cookie successfully set.Expiration in ' + secs + ' seconds ';
    } else {
        status = 'Cookie NOT set. Please make sure your browser is accepting cookies ';
    }

    $('#cookiestatus ').text(status);

}

function get_cookie() {
    var usersName = $('#usersName').val();
    var status = "";
    var theCookie;
    var usersNameFromCookie = "";
    if (document.cookie && getCookie('cookieUsersName')) {
        status = 'Cookie is present ';
        //get user's name from the cookie
        usersNameFromCookie = 'Welcome back ' + getCookie('cookieUsersName') +'!';
    } else {
        status = 'Cookie is NOT present. It may be expired, or never set';
        usersNameFromCookie = '';
    }
    $('#cookiestatus').text(status);
    $('#theUsersName').text(usersNameFromCookie);
}

function init() {
    $('#setcookie').bind('click', set_cookie);
    $('#getcookie').bind('click', get_cookie);
}

//use this in the other JSFiddle
var setCookie = function (cookieName, cookieValue, secondsExpiring) {
    var now = new Date();
    /* Can set to # of Days this way with numberOfDaysHere input param:
        var d = new Date();
        d.setTime(d.getTime()+(numberOfDaysHere*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
    */
    var expireSet = new Date(now.getTime() + secondsExpiring * 1000);
    var expires = "expires=" + expireSet.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + "; " + expires;
}

var getCookie = function (cookieName) {
    var name = cookieName + "=";
    //console.log(name);
    var ca = document.cookie.split(';');
    //console.log(ca);
    for (var i = 0; i < ca.length; i++) {
...