¿Cómo crear y gestionar cookies en JavaScript?

A continuación se presentan los pasos para crear y gestionar cookies en JavaScript.

Paso 1: Creando Cookies

La forma más fácil de crear una cookie es asignar un valor de cadena al objeto document.cookie, que tiene este aspecto:

<script>
  document.cookie = "username=John Doe";
</script>

Esta es una cookie de sesión que se borra cuando el usuario cierra el navegador. El nombre de la cookie es username, y el valor es John Doe.

Si quieres añadir una fecha de caducidad a tu cookie debes usar el atributo expires, de esta manera:

<script>
  document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC";
</script>

El atributo expires es la fecha en que se eliminará la cookie.

Paso 2: Leyendo Cookies

Puedes leer tus cookies con la misma función document.cookie:

<script>
  var x = document.cookie;
</script>

Paso 3: Actualizando Cookies

Actualizar una cookie es tan simple como crear cookies. Solo necesitas usar el mismo nombre para la cookie:

<script>
  document.cookie = "username=John Smith; expires=Thu, 18 Dec 2023 12:00:00 UTC";
</script>

Paso 4: Borrando Cookies

Borrar una cookie es muy simple. Solo necesitas establecer el atributo expires de la cookie a una fecha pasada:

<script>
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
</script>

Nota: El atributo path es muy importante para ser utilizado cuando se elimina una cookie, si no se utiliza puede crear problemas ya que puede que se borre la cookie equivocada o que la cookie no se borre en absoluto. Debes establecer el atributo ruta en la misma ruta donde se definió la cookie.

Además, para facilitarte la vida al trabajar con cookies, podrías considerar el uso de una biblioteca de JavaScript, como js-cookie o cookie.js, ya que ofrece funciones útiles para leer, crear, actualizar, y borrar cookies.