Develop Reference

Storing and Retrieving a JSON Obj from a Cookie

I have looked at many SO and haven't been able to figure out how to actually make this work using pure JS. My problem is that I need to add a 2 different urls to a json array and store it into a cookie for access across subdomains (i looked into the iframe local storage thing and it won't work for this application and the json array will be rather small so 4k cookie limit is plenty).
Now what I have is the following:
function getProject(){
var url_str = window.location.href;
var ProjectImgId = url_str.split('projectId=')[1];
ProjectImgId = ProjectImgId.split('&')[0];
var UserId = url_str.split('flashId=')[1];
var ImageURL = 'https://project-api.artifactuprising.com/project/' + ProjectImgId + '/thumbnail?user=' + UserId;
var RecentProjects = {"url" : url_str, "img" : ImageURL};
return RecentProjects;
}
The above will run on a certain page load. I want to be able to do the following with this: retrieve any existing Projects and if there isn't a match on the url, I wan to push the RecentProjects to the cookie array.
Here is where I am getting stumped. I am following w3 School's cookie set up which has worked for me in the past but I am unable to figure out how to push and pull this data using stringify and parse.
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=/";
}
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 recent = getCookie("yourRecentProjects");
if (recent != "") {
// this is where I would want to parse the JSON and then check if the getProject.url value is in the current cookie json and if it is not, push it.
} else {
recent = getProject();
if (recent != "" && recent != null) {
setCookie("yourRecentProjects", recent, 365);
}
}
}
I am pretty stumped. I have figured out how to do all this using local storage, then i realized this doesn't work across subdomains so great learning experience but not a solution. Any help would be appreciated.

well, the cookie isn't json, it's just a string with a bunch of key values.
not 100% what you are looking to do with the data, but as an example, this is taken from the MDN, example #3, as for how to parse that string to find a specific value: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie:
function doOnce() {
if (!document.cookie.split('; ').find(row => row.startsWith('doSomethingOnlyOnce'))) {
alert("Do something here!");
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
} }
String.prototype.split() creates an array of substring segments that are delimited by the value you pass in, the Array.prototype.find() will look at each value in the array until it either finds the substring that starts with that value, or returns undefined if it finds nothing.
In you case, you'd do document.cookie.split("") to create the array of key value substrings, which at that point you can unpack the data in many ways. maybe you are just looking for the existence of the url value, in which case Array.prototype.includes() is what you are looking for.

Using JavaScript and cookies to create user authentication and a notes app

I'm trying to create a simple notepad app (basic CRUD) using just JavaScript and it has to have a login/signup function, I've managed to create code to get a cookie, if the cookie doesn't exist it sets one and then deletes one after an expiry date.
Here is my cookie code:
function getCookie(usersCookie){
if (document.cookie.length > 0){
begin = document.cookie.indexOf(usersCookie+"=")
if (begin != -1){
begin += usersCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
}
function setCookie(usersCookie, value, expiredays){
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = usersCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires =" + ExpireDate.toGMTString());
}
function delCookie (usersCookie){
if (getCookie(usersCookie)){
document.cookie = usersCookie + "=" + "; expires=Thu, 14-Jan-15 00:00:01 GMT";
}
}
What I need to know now is how I save arrays to the cookie to access later since I can use this for the rest of the app, I'm replacing the DB with Cookies, I'm aware this is the worst way to do something like this, this is purely a self learning exercise to get used to using cookies.
Thanks in advance

you can use JSON.stringify
var arr = [1,2,3,4];
var output = JSON.stringify(arr)
outputs
"[1,2,3,4]"
save this value in cookie and while fetching back use JSON.parse
arr = JSON.parse( output );

How to Delete all Cookies on my site except for one

I'm using the following function to clear all cookies, which works.
This is clearing out the PHPSESSID too as far as I can tell. I want to retain just that one cookie alone.
I added the line: if (name == "PHPSESSID") {...
...to try and catch, and skip, altering the cookie names PHPSESSID, but it doesn't catch it for some reason.
Is there a clear reason why it's not catching, or is there a better way to achieve clearing all cookies except for "PHPSESSID"?
The Function:
function clearCookies() {
var cookies = document.cookie.split(";");
for(var i=0; i < cookies.length; i++) {
var equals = cookies[i].indexOf("=");
var name = equals > -1 ? cookies[i].substr(0, equals) : cookies[i];
if (name == "PHPSESSID") {
alert("yes");
}else{
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
alert(name);
}
}
}

Hi I found the answer by using DevTool's console log instead of the cookie viewer. There's a space in front of PHPSESSID when it's set for some reason. So
" PHPSESSID" works.
Solution here: output it in the console log instead of an alert.

unable to read cookie first time in javascript

I am using Javascript to set the cookie and read the value from cookie.I am using the code available at http://www.w3schools.com/js/js_cookies.asp for creating and reading the value of cookie.when the page loads i am checking that whether that cookie exists or not .Every thing is working fine except it is not reading the cookie when i set it first time and try to read in next page load .it is setting the cookie but does not read only first time .
Here is my code :-
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
//To get the cookie:-
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
//to Delete the cookie:-
function cookieDelete(c_name) {
setCookie(c_name, "delete", -1);
}
And on page load i am using it like :-
$(document).ready(function () {
var aZ = getCookie("menuSave");
if (aZ) {
//do Some thing here
}
else {
setCookie("menuSave", "mysp", null);
}
});

You need to add a 'path' to your cookie. For example:
document.cookie = 'ppkcookie2=yet another test; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/';
The path represents the relative path in your website which the cookie will be readable.
path=/ means it'll be readable on your whole website.
path=/common/ means it'll be readable only in /common/ folder (and its subfolders)

This might not be the answer to your problem but yet a alternative easier solution, hope it helps!
save menu
localStorage.setItem("menusave","vale");
load value
localStorage.getItem("menusave");
Just trying to help!

Since you have marked the question as asp.net,
You can set the cookies as follows:
HttpCookie aCookie = new HttpCookie("lastVisit");
aCookie.Value = DateTime.Now.ToString();
aCookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(aCookie);
And read it back like:
if(Request.Cookies["lastVisit"] != null)
Label1.Text = Server.HtmlEncode(Request.Cookies["lastVisit"].Value);
Refer MSDN Cookies overview

When you pass null for the expiration days it makes your cookie into a session cookie that will not persist very long.
Change this:
setCookie("menuSave", "mysp", null);
to this to give it an actual expiration date:
setCookie("menuSave", "mysp", 7);
If you want to retrieve the cookie from any page besides the exact same page that set it, you will also need to set a path value in the cookie that allows the cookie to be retrieved on more than just the exact page that set it.

Keeping a counter after page is refreshed?

I need to keep a counter for a game that I am making. Each time they win a game, I want to add one to the counter. However, each time they win, the page is refreshed to start a new game. Is there a way to keep this counter updated even if the page is reloaded?

You can use cookies, here's a very simple example with jQuery cookie plugin:
Code: https://github.com/carhartl/jquery-cookie
Usage examples: http://www.electrictoolbox.com/jquery-cookies/
Set cookie:
$.cookie("example", "foo", { expires: 7 });
Get cookie value:
alert( $.cookie("example") );
Very clean and compact :)

Store the value in a cookie or in localStorage if using compatible browser.

Put it in a cookie. Mmmm... cookies. Yummy.
https://developer.mozilla.org/en/DOM/document.cookie

w3school cookie gives a simple explanation for it.
Shortly, it's a way to save your browser data on local machine.
// So, you may try
setCookie("win_count",value,exdays); // to set some data to "win_count"
// and after the page was reloaded to restore the win counter with the help of:
getCookie("win_count");

Use cookies
jQuery:
$.cookie("example", "foo", { expires: 7 });
Pure JavaScript:
function getCookie(name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"))
return matches ? decodeURIComponent(matches[1]) : undefined
}
function setCookie(name, value, props) {
props = props || {}
var exp = props.expires
if (typeof exp == "number" && exp) {
var d = new Date()
d.setTime(d.getTime() + exp * 1000)
exp = props.expires = d
}
if (exp && exp.toUTCString) {
props.expires = exp.toUTCString()
}
value = encodeURIComponent(value)
var updatedCookie = name + "=" + value
for (var propName in props) {
updatedCookie += "; " + propName
var propValue = props[propName]
if (propValue !== true) {
updatedCookie += "=" + propValue
}
}
document.cookie = updatedCookie
}
function deleteCookie(name) {
setCookie(name, null, {
expires: -1
})
}