How to save large data in cookie

Question

According to this article Browser Cookie Limits we can store 4kb string in per cookie.

Now i want store more than 4KB string in cookie (no LocalStorage).

What is your solution for this?

---

cookie[0] = 4kb
cookie[1] = 4kb
cookie[2] = 4kb
cookie[3] = 4kb

This is a good way. But I do not know how to code it.

Answer 1

Don't store data in cookies. Store data in a session using the session facade or session helpers.

If you need it to persist for a long time store a unique id in a cookie, and use that to retrieve data from relevant serialized file or database. Make sure to use a secure method to generate the ID and validate the ID, so some malicious user can't spoof cookie id's to iterate over it and get all the data of other users.

Answer 2

This is an interesting question (but an awful idea), so I decided to test it out just for fun (and I'll even give you teh codez so you can do it if you insist).. But the problem is cookies are sent to the server with every request from that domain, and if you cram as much arbitrary data as you can into your cookies pretty soon the request headers will be too big for the server to understand..

In my test I got this as soon as I refreshed the page after jamming lots of data into my page's cookies.

Bad Request

Your browser sent a request that this server could not understand. Size of a request header field exceeds server limit.

Cookie

Here's the code I used to test it. It does exactly what you suggested, breaks the string up into chunks (after checking how much data the browser is able to stuff into a single cookie) and then inserts each chunk into an indexed cookie.

This broke my test domain in Chrome, don't use this in production, for testing only.

var veryBigString = "Farts ".repeat(99999);
setCookieBatch('myBigCookie', veryBigString);

function setCookieBatch(cname, bigStr){
  var chunks = bigStr.match(new RegExp('[\\s\\S]{1,' +maxCookieSize() + '}', 'g'));
  for(var i=chunks.length; i--;){
    setCookie(cname+"_"+i, chunks[i]);
  }
}

function maxCookieSize(){
  for(var i=0;;i++){
    let str = "1".repeat(i);
    setCookie("c000test", str);
    if(getCookie('c000test') !== str){ 
      document.cookie = 'c000test=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
      return i;
    }
  }
}

function setCookie(cname, cvalue) {
  var d = new Date();
  d.setTime(d.getTime() + 864000000000);
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  }
  return "";
}

---

If you want a nice cross browser solution, consider jSQL ;