How to store a long string in Js Cookies?

Question

Hi I am working with JsCookies it is working good but I am facing a problem

Whenever I store a short string in the cookies, it is working fine but the drawback is i am not able to store long strings in cookies

for example

This is working fine = Cookies.set('Coo', 'string', { expires: 1 })

But facing problem when ever i am trying to store stringified JSON data(large string)

Cookies.set('foo', JSON.stringify(result))

Please help

score 2 · Accepted Answer · answered Jan 04 '21 at 05:12

Cookies should not be used to store large amounts of data. They should be used for stuff like user authorization and configuration options (which, all together, don't add up to much of a payload). Use cookies when the data is relevant to both the client on the server on every request.

Large payloads in cookies should not be sent with every request; it'd be bandwidth-intensive and unnecessary. Instead, either:

If the server doesn't need the information, and you're just using it for client-side storage, use Local Storage instead
If the server does need the information, send the data to the server once (or, at least, send it to the server in a separate request, but not in the cookies) - such as through XHR.
If the server will have the information and the client needs it, send the data to the client some other way, instead of bundling it inside a cookie. For example, you could send the data by embedding it in the HTML response sent to the client, or by having the client make a network request to the server, and have the server respond with the data as JSON.

score 1 · Answer 2 · answered Jan 05 '21 at 04:17

You can't store more than 4k bytes in cookies but there is an alternative for this

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

In local storage, you can store up to 5MB of data so you can go with this, but the problem is if you want to set expiration you can't do it in a simple way, you need to make functions for that. like this

score 0 · Answer 3 · answered Jan 04 '21 at 05:11

Max cookie size is 4K bytes. You may not store more than that. Read more about cookie limits here: http://browsercookielimits.iain.guru/

If I run a test on my Chrome browser, here is what it says:

10:41:28.954: Guessing Max Cookie Count Per Domain: 180
10:41:28.954: Guessing Max Cookie Size Per Cookie: 4096 bytes

score 0 · Answer 4 · answered Jan 04 '21 at 05:14

Use this function :

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

But there are limits to how large a cookie can be(4,096 bytes).

But you can have multiple cookies but in that too there are limits:

Chrome 9 allowed 180 cookies per domain
Firefox 3.6.3 allowed 50 cookies per domain
Internet Explorer 8 allowed 50 cookies per domain
Opera 10 and 9 allowed 30 cookies per domain

How to store a long string in Js Cookies?

4 Answers4