Handling Cookies

The code below gets all the cookies that the current document object can access.

var allCookies = document.cookie

The code below adds a new cookie.
Do not use it like document.cookie += newCookie;

document.cookie = newCookie;

User-defined functions for handling cookies

The createCookie(), readCookie(), and deleteCookie() functions below each write a cookie, read the cookie, and delete the cookie.
The createCookie() function returns string of 'Cookie name=Cookie value;Destruction Date' form.
In this case, domain, path, and security are default values.

function createCookie(name, value, days) {
    var newCookie = name + "=" + escape(value);
    if (days) {
        var expires = new Date();
        expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
        newCookie += "; expires=" + expires.toGMTString();
    }
    document.cookie = newCookie;
}
function readCookie(name) {
    var allCookies = document.cookie;
    var beginIndex = allCookies.indexOf(" " + name + "=");
    if (beginIndex === -1) {
        beginIndex = allCookies.indexOf(name + "=");
    }
    if (beginIndex === -1) {
        return null;
    } else {
        beginIndex = allCookies.indexOf("=", beginIndex) + 1;
        var endIndex = allCookies.indexOf(";", beginIndex);
        if (endIndex === -1) {
            endIndex = allCookies.length;
        }
        return unescape(allCookies.substring(beginIndex, endIndex));
    }
}
function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

I have created an example that can be applied to a bulletin board using a user-defined function.
In the example, the user can store "number of records per page" in the cookie.
(Chrome does not store locally produced cookies, so use a different browser for local testing)

Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Cookie Test</title>
<script>
window.onload = initPage;

function initPage() {
    var selectBox = document.getElementById("numPerPage");
    selectBox.onchange = setNumPerPage;
    var delNumPerPageBtn = document.getElementById("del-numPerPage-btn");
    delNumPerPageBtn.onclick = delNumPerPageCookie;
}
function setNumPerPage() {
    var selectBox = document.getElementById("numPerPage");
    var numPerPage = selectBox.value;
    createCookie('numPerPage', numPerPage, '100');
	showCookie();
}
function showCookie() {
    var numPerPage = readCookie("numPerPage");
    var div = document.getElementById('show-npp-div');
    if(numPerPage) {
      div.innerHTML = numPerPage;
    } else {
      div.innerHTML = 'No Cookies!';
    }
}
function delNumPerPageCookie() {
    deleteCookie("numPerPage");
    showCookie();
}
function createCookie(name, value, days) {
    var newCookie = name + "=" + escape(value);
    if (days) {
        var expires = new Date();
        expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
        newCookie += "; expires=" + expires.toGMTString();
    }
    document.cookie = newCookie;
}
function readCookie(name) {
    var allCookies = document.cookie;
    if (!allCookies) {
      return null;
    }
    var beginIndex = allCookies.indexOf(" " + name + "=");
    if (beginIndex === -1) {
        beginIndex = allCookies.indexOf(name + "=");
    }
    if (beginIndex === -1) {
        return null;
    } else {
        beginIndex = allCookies.indexOf("=", beginIndex) + 1;
        var endIndex = allCookies.indexOf(";", beginIndex);
        if (endIndex === -1) {
            endIndex = allCookies.length;
        }
        return unescape(allCookies.substring(beginIndex, endIndex));
    }
}
function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
</script>
</head>
<body>
<div>
  <select id="numPerPage">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
  <input type="button" id="del-numPerPage-btn" value="Del numPerPage Cookie" />
</div>
<div id="show-npp-div"></div>
</body>
</html>

The setNumPerPage() function creates the numPerPage cookie, which is maintained for 100 days.

function setNumPerPage() {
  var selectBox = document.getElementById("numPerPage");
  var numPerPage = selectBox.value;
  createCookie('numPerPage', numPerPage, '100');
}

When the numPerPage cookie is created, the server side code can get the cookie as follows:

int numPerPage = 10;//default record numbers per page
Cookie[] cookies = req.getCookies();
if (cookies != null) {
  for (int i = 0; i < cookies.length; i++) {
    String name = cookies[i].getName();
    if (name.equals("numPerPage")) {
      numPerPage = Integer.parseInt(cookies[i].getValue());
      break;
    }
  }
}
References