Search code examples
javascriptjqueryjsonparsingstringify

How to properly store an array of objects in a cookie using json.stringify?

I'm trying to store an array of objects in a cookie using JSON.Stringify but I'm having a problem when I parse the cookie and try to push a new object to the array to then stringify it again. It tells me that comments.push is not a function.

var comments = [];
var myData = 0;

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;
}

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 "";
}

function checkCookie() {
    var commentAux = getCookie("myComments");
    if (commentAux != "") {
        //alert("Welcome again " + user);
        return true;
    } else {
        return false;
    }
}

function validateComment() {
	var x = document.forms["commentForm"]["commentSection"].value;
	if (x == null || x == "") {
		alert("There's nothing to comment, write something to proceed.");
		return false;
	} else {
		var comment = {
			firstName:"Name",
			lastName:"Surname",
			text:x
		};
		if (checkCookie() == false) {
			setCookie("myComments", JSON.stringify(comment), 1);
		} else {
			myData = getCookie("myComments");
			comments = JSON.parse(myData);
			alert(comments);
			comments.push(comment);
			setCookie("myComments", JSON.stringify(comments), 1);
		}
	}
	alert(comments.length);
}
<!DOCTYPE html>
<html>
	<head>
		<title>Facebook Simulator by Azael Alanis</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="javascript.js"></script>
	</head>
	<body>
		<img src="facebook-banner.png" alt="Facebook-Banner" style="height:100px;width:800px">
		<div id="section">
			<form name="commentForm" onsubmit="validateComment()">
				<input type="text" name="commentSection" placeholder="What's on your mind?"><button class="buttonText">Enviar</button>
			</form> 
		</div>
	</body>
</html>

What could be the problem? I just want to parse my cookie -> add new object to array -> stringify it again

Thanks

Solution

  • You use this code:

    var comment = { /* ... */ };
if (checkCookie() == false) {
    setCookie("myComments", JSON.stringify(comment), 1);
} else {
    comments = JSON.parse(getCookie("myComments"));
    comments.push(comment);
    setCookie("myComments", JSON.stringify(comments), 1);
}

    The problem is that initially you store the object comment instead of an array containing it.

    Therefore, the next time, when you attempt to push another comment, you can't.

    Try the following instead:

    var comment = { /* ... */ };
if (checkCookie() == false) {
    setCookie("myComments", JSON.stringify([comment]), 1); // <-- array
} else {
    comments = JSON.parse(getCookie("myComments"));
    comments.push(comment);
    setCookie("myComments", JSON.stringify(comments), 1);
}