Je voulais des solutions avec autant de support que possible des anciens navigateurs. Sinon, je dirais que la méthode currentScript ou la méthode des attributs de données serait la plus élégante.
C'est la seule de ces méthodes qui n'a pas encore été évoquée ici. En particulier, si pour une raison quelconque vous avez de grandes quantités de données, la meilleure option pourrait être:
stockage local
<script>
localStorage.setItem('data-1', 'I got a lot of data.');
localStorage.setItem('data-2', 'More of my data.');
localStorage.setItem('data-3', 'Even more data.');
</script>
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');
localStorage a une prise en charge complète des navigateurs modernes, et une prise en charge étonnamment bonne des anciens navigateurs aussi, depuis IE 8, Firefox 3,5 et Safari 4 [il y a onze ans] entre autres.
Si vous ne disposez pas de beaucoup de données, mais que vous souhaitez tout de même une prise en charge étendue du navigateur, la meilleure option est peut-être:
Balises Meta [par Robidu]
<meta name="yourData" content="Your data is here" />
var data1 = document.getElementsByName('yourData')[0].content;
Le défaut de ceci, c'est que le bon endroit pour mettre les balises meta [jusqu'à HTML 4] est dans la balise head, et vous pourriez ne pas vouloir ces données là-haut. Pour éviter cela, ou mettre des balises meta dans le corps, vous pouvez utiliser un:
Paragraphe masqué
<p hidden id="yourData">Your data is here</p>
var yourData = document.getElementById('yourData').innerHTML;
Pour encore plus de prise en charge du navigateur, vous pouvez utiliser une classe CSS au lieu de l'attribut masqué:
.hidden {
display: none;
}
<p class="hidden" id="yourData">Your data is here</p>