Stocker des données dans le navigateur avec CACHE, PREF et COOKIES

jComponent 20 · jcomponent@20 jcomponentfrontendstorage Exécutée avec jComponent 20

Trois helpers stockent des données dans le navigateur :

CACHE(key, value, expiration) stocke n'importe quelle valeur pendant une période ('10 minutes', '1 day') et CACHE(key) la lit, en renvoyant null une fois expirée. Les données vivent dans le stockage du navigateur et survivent donc à un rechargement.
PREF.set(name, value) stocke une préférence de l'utilisateur pendant un an ; relisez-la avec PREF.name.
COOKIES.set(name, value, expiration), COOKIES.get(name) et COOKIES.rem(name) travaillent avec de vrais cookies, que le serveur reçoit à chaque requête.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p class="theme"></p>

	<script>

		CACHE('profile', { name: 'Peter', age: 42 }, '1 hour');
		CACHE('short', 'value', '1 second');

		PREF.set('theme', 'dark');
		$('.theme').text('Theme: ' + PREF.theme);

		COOKIES.set('visited', 'yes', '1 day');

	</script>

</body>
</html>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu