PERSISTÈNCIA DE LA INFORMACIÓ EN LOCAL: COOKIES

Crea al teu SandBox una funció EnmagatzemaCookie(llista de paràmetres, entre ells el nom de la cookie) i demostra el seu ús. La funció ha de crear i guardar una cookie. Crea al teu SandBox una funció RecuperaCookie(llista de paràmetres, entre ells el nom de la cookie) i demostra el seu ús. La funció ha de buscar si la cookie indicada existeix i, en cas afirmatiu, mostrar-ne les dades (a un DIV, per exemple). Si no existeix, indicar-ho també.

by merygarriga

HTML

<html>

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </head>

  <body style="font-family:  'Courier New', Courier, monospace;
    text-align: center;
    background-color: slategray;">

    <h1>Persistència de la informació en local:</h1>
    <h1>COOKIES</h1>

    <h2>function createCookie()</h2>
    <p>Primer crearem una cookie amb el nom i el valor que vulguem.</p>
    <div class="mb-3 row justify-content-center">
      <label class="col-auto col-form-label" for="name">Nom de la cookie:</label>
      <div class="col-3">
        <input class="form-control" type="text" id="name" name="name">
      </div>
    </div>
    <div class="mb-3 row justify-content-center">
      <label class="col-auto col-form-label" for="value">Valor de la cookie:</label>
      <div class="col-3">
        <input class="form-control" type="text" id="value" name="value">
      </div>
      </div>
      <div class="col-auto">
        <button class="btn btn-outline-warning" onClick="createCookie(document.getElementById('name').value, document.getElementById('value').value)">Crear</button>
      </div>

    <br>
    <h2>function getCookie()</h2>
    <p>A continuació tenim una funció que ens recupera la cookie que vulguis (i existeixi). Si no existeix et diu que la cookie no existeix.</p>
    <div class="mb-3 row justify-content-center">
      <label class="col-auto col-form-label" for="searchCookie">Nom de la cookie:</label>
      <div class="col-3">
        <input class="form-control" type="text" id="searchCookie" name="searchCookie">
      </div>
      <div class="col-auto">
        <button class="btn...

CSS

h1 {
  font-size: 3em;
  color: #DED1A9;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #1A3651;
}

p, label {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
}

.explain {
  color: #BABFB0;
}

span {
  font-weight: bold;
  color: #BABFB0;
}

JavaScript

//document.getElementById("name").focus();

function enmagatzemaCookie(nomCookie, valorCookie) {
  const diesCaducitat = 5;
  var dataCaducitat = new Date();
  dataCaducitat.setTime(dataCaducitat.getTime() + (diesCaducitat * 24 * 60 * 60 * 1000));
  //Convertim la data en cadena de text utilitzant la zona horària UTC
  var expires = "expires=" + dataCaducitat.toUTCString();

  // Establim la cookie amb totes les propietats
  document.cookie = nomCookie + "=" + valorCookie + ";" +
    expires + ";path=/;Secure;SameSite=None;";
}

//creem la cookie al fer click al botó
function createCookie(name, value) {
  enmagatzemaCookie(name, value);
}

function recuperaCookie(nomCookie) {
  var c = document.cookie.split('; ');
  for (var a = 0; a < c.length; a++){
    var cookie = c[a].split("=");
    if(cookie[0] === nomCookie){
    	document.getElementById('get').innerHTML = "La cookie " + cookie[0] + " té el valor " + cookie[1] + "<br>";
      return true;
    } else {
    	document.getElementById('get').innerHTML = "La cookie " + nomCookie + " no existeix."
    }
  }
}

function getCookie(nomCookie) {
  recuperaCookie(nomCookie);
}

function checkCookies() {
  var c = document.cookie.split('; ');
  console.log(c);
  for (var a = 0; a < c.length; a++){
  		var ca = c[a].split("=");
    	document.getElementById('check').innerHTML += "La cookie " + ca[0] + " té el valor " + ca[1] + "<br>";
    }
}

function deleteCookie(nomCookie) {
  if (recuperaCookie(nomCookie)) {
    document.cookie = nomCookie + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; Secure; SameSite=None;";
    document.getElementById('delete').innerHTML = "La cookie " + nomCookie + " ha sigut eliminada."
  } else {
  	    document.getElementById('delete').innerHTML = "La cookie " + nomCookie + " no existeix."
  }
}