Handling Cookies

The code below gets all 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;

Makingfunctions for handling cookies

The createCookie(), readCookie(), and deleteCookie() functions below each add a new cookie, read the cookie, and delete the cookie. The createCookie() function uses string of "Cookie name=Cookie value;Destruction Date" form to add a new cookie. If there is no domain, path, or security information in the string used to add a new cookie, they all have 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;';
}

The following example allows the user to store the "number of records per page" in a cookie. Chrome does not store locally generated cookies, so use other browsers 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.

The following shows how to get the numPerPage cookie on the server-side code.

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

How to delete a cookie?