Gegevens in de browser opslaan met CACHE, PREF en COOKIES

jComponent 20 · jcomponent@20 jcomponentfrontendstorage Uitgevoerd met jComponent 20

Drie helpers slaan gegevens op in de browser:

CACHE(key, value, expiration) bewaart een willekeurige waarde voor een periode ('10 minutes', '1 day') en CACHE(key) leest hem, met null zodra hij is verlopen. De gegevens leven in de opslag van de browser en overleven dus een herlading.
PREF.set(name, value) bewaart een gebruikersvoorkeur voor een jaar; lees hem terug als PREF.name.
COOKIES.set(name, value, expiration), COOKIES.get(name) en COOKIES.rem(name) werken met echte cookies, die de server bij elk verzoek ontvangt.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld