TUTOS.EU

Lire et écrire un cookie

Lire et écrire dynamiquement un cookie en JavaScript


Cette méthode utilise du jquery et js-cookie. Cela facilite le travail.
On trouve js-cookie sur https://github.com/js-cookie ainsi qu'en copie en bas de cette page.
js.cookie.min.js devra être placé dans le même répertoire que votre page web.

Notez que les cookies ne fonctionne que si votre page est hébergée par un serveur web.

Ne vous acharnez pas à faire tourner ce code sur un fichier .html situé en local sur votre poste.

Pour l'explication du code, on cherche ici un cookie nommé PctVise.
Si il n'existe pas on le crée avec une valeur par défaut.
Si il existe, on lit sa valeur pour l'affecter à la liste déroulante/combobox.

Dès que l'on clic sur la combobox, on met à jour la valeur du cookie.

<select id="comboPourcentageVise">
	<option selected value=80>80</option>
	<option value=85>85</option>
	<option value=90>90</option>
</select>

<SCRIPT TYPE="text/javascript">

	var MesCookies = Cookies.noConflict();
	valeurPerso = MesCookies.get('PctVise');
	if (valeurPerso === "undefined"){valeurPerso = 80;} //Définition d'une valeur par défaut

	// On change la valeur de la combo box en fonction de la valeur du cookie
	$("#comboPourcentageVise option[value=" + valeurPerso + "]").attr('selected', 'selected');

	// Mise à jour du cookie quand on clique sur la combobox
	$( '#comboPourcentageVise').on( "click", function( event ) {
		valeurPerso = $("#comboPourcentageVise").find('option:selected').val();
		MesCookies.set('PctVise', valeurPerso, { expires: 365 });						

	});
	
</SCRIPT>
Lien vers le fichier : cliquez ici Copier le code

Voici un exemple complet qui montre le fonctionnement

<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
	<meta charset="utf-8" />

	<style>
		select {
			font-size: 1.1rem;
			/* padding: 2px 5px; */
			border: 0;
			outline: 0;
			background-color: transparent;
			width: 90px;
			text-align: center;
			margin: 0px ;
		}

	</style>

	<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
	<!-- https://github.com/js-cookie/js-cookie#readme -->
	<script src="js.cookie.min.js" type="text/javascript"></script>
	<!-- Si vous voulez obtenir la bibliothèque via un CDN -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> -->
	
</HEAD>
<BODY>
	
	<select id="comboPourcentageVise">
		<option selected value=80>80</option>
		<option value=85>85</option>
		<option value=90>90</option>
	</select>

	<SCRIPT TYPE="text/javascript">

		var MesCookies = Cookies.noConflict();
		valeurPerso = MesCookies.get('PctVise');
		if (valeurPerso === "undefined"){valeurPerso = 80;} //Définition d'une valeur par défaut
		// console.log('valeurPerso : ' + valeurPerso);

		// On change la valeur de la combo box en fonction de la valeur du cookie
		$("#comboPourcentageVise option[value=" + valeurPerso + "]").attr('selected', 'selected');
		// $("#comboPourcentageVise").val(valeurPerso);

		// Mise à jour du cookie quand on clique sur la combobox
		$( '#comboPourcentageVise').on( "click", function( event ) {
			// console.log('Click comboPourcentageVise !');
			valeurPerso = $("#comboPourcentageVise").find('option:selected').val();
			// console.log('valeurPerso : ' + valeurPerso);
			MesCookies.set('PctVise', valeurPerso, { expires: 365 });						

		});
		
	</SCRIPT>

</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Cette méthode ne nécessite ni jquery ou js-cookie. Je la trouve plus lourde et moins fiable (support sur différents navigateurs)

<HTML>
	<HEAD>
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>

		<SCRIPT TYPE="text/javascript">	
			function recupValeurElement(IdElement)
			{
				if (document.getElementById)
				{
					return document.getElementById(IdElement);
				}
				else if (document.all)
				{
					return document.all[IdElement];
				}
			}

			function getCookie(sName) {
				//de http://www.siteduzero.com/tutoriel-3-4721-lire-un-cookie.html
				var oRegex = new RegExp("(?:; )?" + sName + "=([^;]*);?");
				if (oRegex.test(document.cookie)) {
						return decodeURIComponent(RegExp["$1"]);
				} else {
						return null;
				}
			}

			function setCookie(sName, sValue) {
				var today = new Date(), expires = new Date();
				expires.setTime(today.getTime() + (365*24*60*60*1000));
				document.cookie = sName + "=" + encodeURIComponent(sValue) + ";expires=" + expires.toGMTString();
			}

			function fctChargementdesCookies(){
			
				var varMaVariable01 = '';

				//Récupération des noms de serveurs
				varMaVariable01 = getCookie('TxtCase01');
				if (varMaVariable01 != null){recupValeurElement("TxtCase01").value = varMaVariable01;}
				
				varMaVariable01 = getCookie('TxtCase02');
				if (varMaVariable01 != null){recupValeurElement("TxtCase02").value = varMaVariable01;}

			}

			function fctSauvegardedesCookies(){
			
				var varMaVariable01 = '';
				
				varMaVariable01 = recupValeurElement("TxtCase01").value;
				if (varMaVariable01.length >= 0){setCookie('TxtCase01', varMaVariable01);}

				varMaVariable01 = recupValeurElement("TxtCase02").value;
				if (varMaVariable01.length >= 0){setCookie('TxtCase02', varMaVariable01);}

			}

		</SCRIPT>

<?php
	//Version du 29 mars 2013
	//Lire et ecrire des cookies en JavaScript

	echo "<TABLE>\n";
	echo "<TR><TD>Une première case :</TD><TD><INPUT type=\"Text\" ID=\"TxtCase01\" NAME=\"TxtCase01\" SIZE=50 onkeyup=\"fctSauvegardedesCookies();\"></TD></TR>\n";
	echo "</TR>\n";
	echo "<TR><TD>Une seconde case :</TD><TD><textarea name=\"TxtCase02\" id=\"TxtCase02\" cols=\"20\" rows=\"4\" onkeyup=\"fctSauvegardedesCookies();\"></textarea></TD></TR>\n";
	echo "</TABLE>\n";
	echo "<BR>\n";
	echo "\n";

?>

	<SCRIPT TYPE="text/javascript">
		function fctOnLoad(){
			fctChargementdesCookies();
			fctGenererCommande();
		}

		window.onload = fctOnLoad();
	</SCRIPT>

	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Avec une boucle

<HTML>
	<HEAD>
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>

		<SCRIPT TYPE="text/javascript">	
			function recupValeurElement(IdElement)
			{
				if (document.getElementById)
				{
					return document.getElementById(IdElement);
				}
				else if (document.all)
				{
					return document.all[IdElement];
				}
			}

			function getCookie(sName) {
				//de http://www.siteduzero.com/tutoriel-3-4721-lire-un-cookie.html
				var oRegex = new RegExp("(?:; )?" + sName + "=([^;]*);?");
				if (oRegex.test(document.cookie)) {
						return decodeURIComponent(RegExp["$1"]);
				} else {
						return null;
				}
			}

			function setCookie(sName, sValue) {
				var today = new Date(), expires = new Date();
				expires.setTime(today.getTime() + (365*24*60*60*1000));
				document.cookie = sName + "=" + encodeURIComponent(sValue) + ";expires=" + expires.toGMTString();
			}

			function fctChargementdesCookies(){				
				var MesChamps = "TxtCase01;TxtCase02";
				var varMaVariable01 = '';
				varTableauMesChamps=new Array();
			
				if (MesChamps.length > 0){
					varTableauMesChamps = MesChamps.split(';');	
					for (var Compteur in varTableauMesChamps)
					{
						varUneValeur = varTableauMesChamps[Compteur];
						if (varUneValeur.length > 0){
							varMaVariable01 = getCookie(varUneValeur);
							if (varMaVariable01 != null){recupValeurElement(varUneValeur).value = varMaVariable01;}
						}
					}
				}						
			}

			function fctSauvegardedesCookies(){			
				var MesChamps = "TxtCase01;TxtCase02";
				var varMaVariable01 = '';
				varTableauMesChamps=new Array();
			
				if (MesChamps.length > 0){
					varTableauMesChamps = MesChamps.split(';');	
					for (var Compteur in varTableauMesChamps)
					{
						varUneValeur = varTableauMesChamps[Compteur];
						if (varUneValeur.length > 0){
							varMaVariable01 = recupValeurElement(varUneValeur).value;
							if (varMaVariable01.length >= 0){setCookie(varUneValeur, varMaVariable01);}
						}
					}
				}
			}

		</SCRIPT>

<?php
	//Version du 29 mars 2013
	//Lire et ecrire des cookies en JavaScript

	echo "<TABLE>\n";
	echo "<TR><TD>Une première case :</TD><TD><INPUT type=\"Text\" ID=\"TxtCase01\" NAME=\"TxtCase01\" SIZE=50 onkeyup=\"fctSauvegardedesCookies();\"></TD></TR>\n";
	echo "</TR>\n";
	echo "<TR><TD>Une seconde case :</TD><TD><textarea name=\"TxtCase02\" id=\"TxtCase02\" cols=\"20\" rows=\"4\" onkeyup=\"fctSauvegardedesCookies();\"></textarea></TD></TR>\n";
	echo "</TABLE>\n";
	echo "<BR>\n";
	echo "\n";

?>

	<SCRIPT TYPE="text/javascript">
		function fctOnLoad(){
			fctChargementdesCookies();
			fctGenererCommande();
		}

		window.onload = fctOnLoad();
	</SCRIPT>

	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Téléchargement(s)

NomSite Web d origineDescription
js.cookie.min.js https://github.com/js-cookie js-cookie


Article(s) en relation(s)

Créer des éléments dynamiquement dans une page HTML avec jQuery

2