# MX005 - Javascript :cookie:
## Rikke
This is the Javascript data cookie I created from the [example script](https://hackmd.io/@siusoon/webCookie) provided in class.
I began to understand the code by reading through the code, commenting out parts to see what happened when I reloaded the html-page in Firefox. I had trouble understanding the expiry date because I couldn't really see what happened when it was only 30 seconds from creating the cookie. Sooo I just added some numbers, and now it saves the cookie for 19,44 hours. Oh well, it works now: I can close the browser, reopen it and load cookies, so now I understand it better.
By actually creating some kind of cookie that stores data and is able to retrieve that data later (before it expires), I have learned something about the nature of cookies: it is basically code, created by humans to to suit other people's needs or wants, whatever the purpose is. It is possible to write the code in a language that humans can read, allowing for users to read and maybe to some extent understand the data that is stored about their use of specific websites.
This process can therefore be seens as critical making, allowing me to achieve a better understanding of something by making a simpler version of it. If I were to build a kind of art project and think the cookie website project through, perhaps the end product would allow other people to get a better understanding of cookies also, by making cookies visible and readable.
In short, cookies can be understandable for human beings, so perhaps they should? But would people care if their cookies were readable? Would companies comply?
This is my code:
```
<!DOCTYPE html>
<!--
//ref: https://www.youtube.com/watch?v=5ttpghXjG0g
example of cookie: _user=siusoon;expires=Thu, 10 Sep 2020 09:01:51 GMT;
-->
<html>
<head>
<script>
let myCookies = {};
function saveCookies()
{
//retrieve data from the form elements
myCookies["_user"] = document.getElementById("user").value;
myCookies["_uage"] = document.getElementById("age").value;
myCookies["_favColor"] = document.getElementById("favoriteColor").value;
//get rid of existing cookie
document.cookie = "";
//set expiry time, that is sometime tomorrow
let date = new Date();
date.setTime(date.getTime() + (70000 * 1000));
let expiry = "expires=" + date.toUTCString();
//store each cookie
let cookieString = "";
//loop via each myCookies (e.g user and age....)
//join by ';'
for (let key in myCookies)
{
cookieString = key+"="+myCookies[key]+";" + expiry +";";
document.cookie = cookieString; //save each cookie
console.log(cookieString);
}
document.getElementById("out").innerHTML = "Your cookie data: <br><br>" + document.cookie + "<br><br>" + expiry; //load in the output with the latest array first
}
function loadCookies()
{
console.log(document.cookie);
myCookies = {};
let kv = document.cookie.split(";"); //different key
for (let id in kv)
{
let cookie = kv[id].split("="); //actual value
myCookies[cookie[0].trim()] = cookie[1]; //trim white space and assign to the second half i.e value
}
document.getElementById("user").value = myCookies["_user"];
document.getElementById("age").value = myCookies["_uage"]
document.getElementById("favoriteColor").value = myCookies["_favColor"]
}
</script>
</head>
<body>
User: <input type="text" id = "user"> <p>
Age: <input type="text" id = "age"> <p>
Favorite color: <input type="text" id = "favoriteColor"> <p>
<button onclick="saveCookies()">Save to Cookies</button>
<button onclick="loadCookies()">Load From Cookies</button>
<p id="out"></p>
</body>
</html>
```
## Mark, Magrete & Anne
With the limited time we had, we decided to just adjust the code provided a bit. We kept the fields as user and age, but changed the buttons to "log in" and "log out". The idea is that you first enter your name and age then log out, which will give you the message "logging out..." and empty the fields. Afterwards pressing the log in button will fill in the fields again with the information you inputted and give the message "Welcome back [user] of age [age]". So we more or less made a sort of auto log-in button (even though a site that uses age instead of password to log in is perhaps a questionable concept).
We also experimented with changing the amoung of time the cookie is stored. It's intersting how easy it is to add a few zeroes and suddenly have a piece of data that is supposed to be stored for 950 years, which is what we did here. You might think the browser would impose some sort of limit on this, but if there is one it is certainly exceedingly high, because I can see in my browser that the cookie will indeed last around 950 years until 2971. Its curious that this data can theoretically outlive us even though it would be completely obsolete by then. "Age" is particularly contradictory to store for this long, since it would be outdated information in just a single year (at most). You could maybe make a function that updates the age cookie automatically based on the current time and when the cookie was first created, but then the cookie could theoretically reach values far beyond any possible human age during its own 950 year lifespan.
```
<!DOCTYPE html>
<!--
//ref: https://www.youtube.com/watch?v=5ttpghXjG0g
example of cookie: _user=siusoon;expires=Thu, 10 Sep 2020 09:01:51 GMT;
-->
<html>
<head>
<script>
let myCookies = {};
function saveCookies()
{
//retrieve data from the form elements
myCookies["_user"] = document.getElementById("user").value;
myCookies["_uage"] = document.getElementById("age").value;
document.getElementById("user").value = "";
document.getElementById("age").value = "";
//get rid of existing cookie
document.cookie = "";
//set expiry time, that is 30 seconds of now
let date = new Date();
date.setTime(date.getTime() + (30000000000 * 1000));
let expiry = "expires=" + date.toUTCString();
//store each cookie
let cookieString = "";
//loop via each myCookies (e.g user and age....)
//join by ';'
for (let key in myCookies)
{
cookieString = key+"="+myCookies[key]+";" + expiry +";";
document.cookie = cookieString; //save each cookie
}
document.getElementById("out").innerHTML = "Logging out..."
}
function loadCookies()
{
myCookies = {};
let kv = document.cookie.split(";"); //different key
for (let id in kv)
{
let cookie = kv[id].split("="); //actual value
myCookies[cookie[0].trim()] = cookie[1]; //trim white space and assign to the second half i.e value
}
document.getElementById("user").value = myCookies["_user"];
document.getElementById("age").value = myCookies["_uage"];
document.getElementById("out").innerHTML = "Welcome back " + myCookies["_user"] + " of age " + myCookies["_uage"]; //load in the output with the latest array first
}
</script>
</head>
<body>
User: <input type="text" id = "user"> <p>
Age: <input type="text" id = "age">
<p>
<button onclick="saveCookies()">Log Out</button>
<button onclick="loadCookies()">Log In</button>
<p id="out"></p>
</body>
</html>
```
Google Drive
Gist
Clipboard
Sign in with Wallet
