[HOW-TO/TUTORIAL] [localStorage] ein paar Beispiele

mikdoe

mikdoe

Moderator
Spiele gerade mit localStorage rum, um mein Problem aus http://forum.jswelt.de/allgemeines/59100-java-applet-abfragen.html zu lösen.
Muss sagen, verblüffend einfach. Ist zwar nicht browser- aber instanzübergreifend. Das heißt, man kann pro Browser ein Storage nutzen oder dies auch instanzabhängig (pro Tab/Fenster) machen, dann nutzt man nicht das Schlüsselwort localStorage sondern sessionStorage

Wer Lust hat, kann gern ein bisschen mit rumspielen :)

HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Fenstertitel</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	function check_localStorage() {
		try {
			localStorage.setItem('test','test');
			if (localStorage.getItem('test') == 'test') {
				localStorage.removeItem('test');
				throw true;
			}
			else { throw false; }
		}
		catch(e) { return (e ? true : false); }
	}
	function gib_datum(dateobj) {
		var tag = dateobj.getDate();
		if (tag < 10) { tag = '0'+tag; }
		var monat = dateobj.getMonth()+1;
		if (monat < 10) { monat = '0'+monat; }
		var jahr = dateobj.getFullYear();
		return tag+'.'+monat+'.'+jahr;
	}
	</script>
	<style type="text/css">
	body {
		font-family:	"Arial";
	}
	input {
		cursor:			pointer;
	}
	</style>
</head>
<body>
	<div id="ausgabe"></div>
	<input type="button" value="Normaler Test" id="btn_normal">
	<input type="button" value="Test mit date Objekt" id="btn_date">
	<script>
	jQuery('#btn_date').click(function() {
		if (check_localStorage) {
			jQuery('#ausgabe').append('<br>localStorage wird von diesem Browser unterstützt');
			jQuery('#ausgabe').append('<br>Schreibe Datum Objekt in key "obj"');
			var dobj = new Date();
			localStorage.setItem('obj',dobj);
			jQuery('#ausgabe').append('<br>Lese Datum');
			var saveobj = new Date(localStorage.getItem('obj'));
			jQuery('#ausgabe').append('<br>Gespeichert war: '+gib_datum(saveobj));
		}
		else { jQuery('#ausgabe').append('<br>Kein localStorage vefügbar!'); }
	});

	jQuery('#btn_normal').click(function() {
		if (check_localStorage) {
			jQuery('#ausgabe').append('<br>localStorage wird von diesem Browser unterstützt');
			jQuery('#ausgabe').append('<br>Lese key "varname" aus');
			var val = localStorage.getItem('varname');
			if (val == 'inhalt') {
				jQuery('#ausgabe').append('<br>Wert ist da und wird wieder gelöscht');
				localStorage.removeItem('varname');
			}
			else {
				jQuery('#ausgabe').append('<br>Schreibe key "varname" mit Value "inhalt"');
				localStorage.setItem('varname','inhalt');
				jQuery('#ausgabe').append('<br>Fertig, bitte in einem neuen Fenster oder einer neuen Instanz die Seite nochmal aufrufen und schauen, ob der Wert noch da ist');
			}
		}
		else { jQuery('#ausgabe').append('<br>Kein localStorage vefügbar!'); }
	});
	</script>
</body>
</html>
 
Deine check_localStorage-Funktion ist etwas seltsam und liefert auch true, wenn der Browser localStorage gar nicht unterstützt.
Code: 
function checkLocalStorage() {
	try {
		localStorage.setItem('test','test');
		if (localStorage.getItem('test') == 'test') {
			localStorage.removeItem('test');
			return true;
		}
		return false;
	}
	catch(e) { return false; }
}

Aber ich würde da sowieso nur auf die Existenz von window.localStorage, localStorage.setItem(), localStorage.getItem() und localStorage.removeItem() prüfen...
 
Ganz einfach:
Code: 
if (window.localStorage && localStorage.setItem && localStorage.getItem && localStorage.removeItem){
	// mach was mit localStorage
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben