How to Write A Cookie With Multiple Attirbutes in JavaScript

I am new to web development, and I have recently figured out how to write a simple cookie with one attribute that is saved to it. For example, I do know how to write a cookie that is written by JavaScript with only the name of a user that is entered into a prompt in JavaScript. If I wanted to write three or more attributes and be able to read them in later if the page is refreshed or viewed at a later time, how would I write a cookie that would contain three weather related attributes such as temperature, wind speed, and weather description.

Any help that could be provided would be greatly appreciated.
thenthorn1010Asked:
Who is Participating?
 
nap0leonConnect With a Mentor Commented:
Here are some cookie functions to take for a test drive:

GetCookieKeyValue(cookieName, keyName) - returns the value for the key from the cookie
GetEntireCookieValue(cookieName) - returns all of the cookie's contents
GetQueryStringKeyValuePair(queryString, keyName) - helper function for the above
GetQueryStringValue(queryString, keyName) - helper function for the above

SetCookieValue(cookieName, keyName, newValue) - adds/updates a value to the cookie, creates cookie if necessary

// Get only the specified key value for the named cookie
// (when using multiple keys in a cookie in ASP or ASP.Net they are stored in the value 
// like a querystring)
function GetCookieKeyValue(cookieName, keyName) {
    var value = "";
    
    if (document.cookie.length > 0) {
        var cookieVal = GetEntireCookieValue(cookieName);
        
        if (cookieVal != null && cookieVal.length > 0) {
            value = GetQueryStringValue(cookieVal, keyName);
        }
    }
    
    return value;
}

// Get the entire value (all keys) for a specified cookie
function GetEntireCookieValue(cookieName) {
	var nameEQ = cookieName + "=";
	var ca = document.cookie.split(';');
	
	for(var i = 0; i < ca.length; i++) {
		var c = ca[i];
		    
		if (c.indexOf(nameEQ) > -1) {		
		    return c.substring(c.indexOf(nameEQ) + nameEQ.length, c.length);
		}
	}
	
	return "";
}

// Return the entire key value pair associated with the specified key in the querystring
function GetQueryStringKeyValuePair(queryString, keyName) { 
    var value = "";
    var keyValuePairs = queryString.split('&');
  
    for (i = 0; i < keyValuePairs.length && value == ""; i++) {
        if (keyValuePairs[i].length > 1) {
            var pair = keyValuePairs[i].split('=');
            
            if (pair.length == 2) {
                var pairKeyName = pair[0];
                  
                if (pairKeyName == keyName) {
                    value = keyValuePairs[i];
                }
            }
        }
    }
    
    return value;
}


// Return the value associated with the specified key in the querystring
function GetQueryStringValue(queryString, keyName) { 
    var value = "";
    var keyValuePairs = queryString.split('&');
  
    for (i = 0; i < keyValuePairs.length && value == ""; i++) {
        if (keyValuePairs[i].length > 1) {
            var pair = keyValuePairs[i].split('=');
            
            if (pair.length == 2) {
                var pairKeyName = pair[0];
                  
                if (pairKeyName == keyName) {
                    value = pair[1];
                    
                    break;
                }
            }
        }
    }
    
    return value;
}

// Set the specified key in the specified cookie to the specified value
function SetCookieValue(cookieName, keyName, newValue) {
    var oldCookieVal = GetEntireCookieValue(cookieName);
    var newKeyValuePair = keyName.toUpperCase() + '=' + escape(newValue);

    if (oldCookieVal == "") {
        // Cookie does not exist -- create it
        // No expiry date = session cookie
        document.cookie = cookieName + "=" + newKeyValuePair + "; path=/; domain=.YOURDOMAINHERE.com";
    }
    else if (oldCookieVal.indexOf(keyName.toUpperCase() + '=') != -1) {
        // Cookie exists AND value exists -- replace value in cookie
        
        var oldKeyValuePair = GetQueryStringKeyValuePair(oldCookieVal, keyName.toUpperCase());        
        var newCookieVal = oldCookieVal.replace(oldKeyValuePair, newKeyValuePair);
        
        document.cookie = cookieName + "=" + newCookieVal + "; path=/; domain=.YOURDOMAINHERE.com";
    }
    else {
        // Cookie exists but value does not -- append to the data
    
        document.cookie =  cookieName + "=" + oldCookieVal + "&" + newKeyValuePair + "; path=/; domain=.YOURDOMAINHERE.com"; 
    }
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.