I have an app in Nuxt and I would like to store content of the shopping cart in the cookies. To store cookies I use cookie-universal-nuxt package. However, I am not able to store "some" objects in it. Here is an example:

const userInfo = {
        name: 'Smith',
        age: 41,
        isVip: true,
      }

this.$cookies.set('userInfo', JSON.stringify(userInfo))

console.log(this.$cookies.get('userInfo'))

This works as it should, no problem there. Problem is, it does not work with my real objects:

const savedProductsArray = this.$store.getters['cart/products'] // returns array of products
const savedProducts = savedProductsArray[0] // select first one

this.$cookies.set('productInfo', JSON.stringify(savedProducts))

console.log(this.$cookies.get('productInfo')) // prints undefined

So the second object is apperently not stored in cookies. Any idea why? Thanks!

Btw, this is how userInfo object looks like in console:

Object {
   age: 41,
   name: "Smith",
   isVip: true,
}

and savedProducts:

Object {
   calories: 123, 
   name: "a",
   ...
}

So it looks like they are the "same" objects, but somehow only the first one can be stored in cookies...

I have an app in Nuxt and I would like to store content of the shopping cart in the cookies. To store cookies I use cookie-universal-nuxt package. However, I am not able to store "some" objects in it. Here is an example:

const userInfo = {
        name: 'Smith',
        age: 41,
        isVip: true,
      }

this.$cookies.set('userInfo', JSON.stringify(userInfo))

console.log(this.$cookies.get('userInfo'))

This works as it should, no problem there. Problem is, it does not work with my real objects:

const savedProductsArray = this.$store.getters['cart/products'] // returns array of products
const savedProducts = savedProductsArray[0] // select first one

this.$cookies.set('productInfo', JSON.stringify(savedProducts))

console.log(this.$cookies.get('productInfo')) // prints undefined

So the second object is apperently not stored in cookies. Any idea why? Thanks!

Btw, this is how userInfo object looks like in console:

Object {
   age: 41,
   name: "Smith",
   isVip: true,
}

and savedProducts:

Object {
   calories: 123, 
   name: "a",
   ...
}

So it looks like they are the "same" objects, but somehow only the first one can be stored in cookies...

• javascript
• vue.js
• cookies
• nuxt.js

• 2 could you check what is the value of JSON.stringify(savedProducts)also it will help if you could include fully stringified savedProducts in the post. Also, be aware per domain only about 4KB is allowed size for cookie so if you are trying to store that much data that could be the reason as well. – Dipen Shah Commented Sep 26, 2020 at 3:23
• Yeah, my JSON object was much larger than 4KB, so that was the problem. I wasn't aware of this limit. – xmigas Commented Sep 26, 2020 at 12:32
• 1 @DipenShah, please post your ment as an answer. peter1993_de can accept your answer and you may receive the bounty. – jnovack Commented Oct 2, 2020 at 13:36
• Not sure if you can reset selected answer but sure. – Dipen Shah Commented Oct 2, 2020 at 13:37
• 1 Awarding the bounty is separate from accepting the answer. In all fairness, OP should have invited you to add it as an answer rather than posting it themselves. Since they offered a bounty and you're the one who sourced the correct solution, your answer should be awarded the bounty, but that's entirely up to OP. – tao Commented Oct 2, 2020 at 13:46

1 Answer 1

Update: OP confirmed the issue was with cookie size.

There could be multiple issues, could you check what is the value of JSON.stringify(savedProducts) also it will help if you could include fully stringified savedProducts in the post.

Also, be aware per domain only about 4KB is allowed size for cookie so if you are trying to store that much data that could be the reason as well