Wie speicher und lade ich Strings in Cookies?

[kkapsner]

Da das Thema immer wieder hier auftaucht will ich hier mal an exponierter Stelle meine Cookie-Verwaltung darstellen:

var cookie = {
	// return value if the name is not stored in document.cookie
	defaultReturnValue: null,
	// this should be true if you want to be sure, that all your special characters (like ä, ö, ü, ², µ, €, \n, \t, ...) are treated in a safe way - but with this option enabled the string stored in the cookie can get much longer
	secureEncoding: true,
	
	update: function(){
		var cString = document.cookie.toString();
		var werte = cString.split(";");
		for (var i = 0; i < werte.length; i++){
			var wert = werte[i].split("=");
			var name = this.decode(wert[0].replace(/^\s+/, ""));
			var value = this.decode(wert.slice(1).join("="));
			this[name] = value;
		}
		return this;
	},
	
	getValue: function(name){
		this.update();
		if (typeof(this[name]) == "string") return this[name];
		return this.defaultReturnValue;
	},
	
	setValue: function(name, value, att){
		//att can contain this attributes: expire, domain, path, secure
		if (!att) att = {};
		var insert = this.encode(name) + "=" + this.encode(value);
		if (att.expire && att.expire.constructor == Date){
			insert += ";expires=" + att.expire.toGMTString();
		}
		if (typeof(att.expire) == "string" && att.expire){
			insert += ";expires=" + att.expire;
		}
		if (typeof(att.domain) == "string" && att.domain){
			insert += ";domain=" + att.domain;
		}
		if (typeof(att.path) == "string" && att.path){
			insert += ";path=" + att.path;
		}
		if (att.secure){
			insert += ";secure";
		}
		document.cookie = insert + ";";
		return this;
	},
	
	deleteValue: function(wert, att){
		if (!att) att = {};
		att.expire = new Date(0);
		this.setValue(wert, "", att);
		if (typeof this[wert] == "string") this[wert] = false;
		return this;
	},
	encode: function encode(str){
		if (this.secureEncoding) return str.replace(/([^a-z0-9])/ig, function(m, f){return "+" + f.charCodeAt(0).toString(36) + "/"});
		return str.replace(/(%|=|;)/g, function(match, f){return "%" + {"%": "%%", "=": "%_", ";": "%."}[f];});
	},
	decode: function decode(str){
		if (this.secureEncoding) return str.replace(/\+([a-z0-9]+?)\//g, function(m, f){return String.fromCharCode(parseInt(f, 36));})
		return str.replace(/%(%|_|.)/g, function(match, f){return {"%": "%", "_": "=", ".": ";"}[f];});
	}
};

Die Anwendung ist recht einfach:

var name = "³²{};=,&%+/";
var value = ";=;()~ÄÜä\\}]/()";
cookie.setValue(name, value);
var newValue = cookie.getValue(name);
alert(value + " -> " + newValue + ":" + (newValue == value));
cookie.deleteValue(name);
alert(cookie.getValue(name));

- versucht das mal mit den üblichen Cookie-Skripts!

PS: Kommentare, Verbesserungen, Fragen dazu gerne gesehen.

[Dormilich]

kleine Verbesserung da att = null einen Fehler verursachen sollte.

	deleteValue: function(wert, att){
		if (!(att instanceof Object)) att = {};
		att.expire = new Date(0);
		this.setValue(wert, "", att);
		if (typeof this[wert] == "string") this[wert] = false;
	},

[jspit]

Ein schönes Beispiel, wo so alles drin ist was man so für Cookies braucht. Habe selbst noch nicht allzu viel Cookies benutzt. Hab erstmal ein wenig den Code studieren müssen um zu wissen wie ein Ablaufdatum gesetzt wird: als Object!

cookie.setValue(name, value, {expire: new Date("2010/2/27 8:26")}); 

ok ?
Dazu eine Frage:
Warum wird das att so ausgiebig getestet. Sollte nicht der Nutzer des Codes wissen was er will?

kleine Verbesserung da att = null einen Fehler verursachen sollte.

Wer ruft denn eine function mit den att==null auf ???
Wenn ich att weglasse, ist der Wert intern undefined und einen Fehler gibt es auch nicht.

[Dormilich]

Wer ruft denn eine function mit den att==null auf ???
Wenn ich att weglasse, ist der Wert intern undefined und einen Fehler gibt es auch nicht.

das problem war der Test, da typeof null == "object"

[jspit]

das problem war der Test, da typeof null == "object"

Was soll denn bitte null sein und wann ?

[Dormilich]

ich hab grad gesehen, daß dieser Test auch in setValue() geändert werden muß.

    setValue: function (name, value, att)
    {
        //att can contain this attributes: expire, domain, path, secure
        if (!(att instanceof Object)) {
            att = {};
        }
        var insert = this.encode(name) + "=" + this.encode(value);
        if (att.expire instanceof Date) {
            insert += ";expires=" + att.expire.toGMTString();
        } 

[Dormilich]

Was soll denn bitte null sein und wann ?

woher soll ich das wissen, es ist eine öffentliche Methode und daher nicht auszuschließen (irgendeinen DAU gibt es immer). Andernfalls sollte der Test gleich weggelassen werden.

[Dormilich]

es wäre sicher auch sinnvoll, am Ende von setValue() this.update() aufzurufen, damit die neuen Daten auch über Cookie.name abrufbar sind

[jspit]

woher soll ich das wissen, es ist eine öffentliche Methode und daher nicht auszuschließen (irgendeinen DAU gibt es immer). Andernfalls sollte der Test gleich weggelassen werden.

Wenn du schon einen DAU an solche Methoden lassen möchtest, dann ist instanceof Object auch nicht das Allheilmittel, denn:
(function() {}) instanceof Object == true

[Dormilich]

Wenn du schon einen DAU an solche Methoden lassen möchtest, dann ist instanceof Object auch nicht das Allheilmittel, denn:
(function() {}) instanceof Object == true

ja und? das verursacht jedenfalls keinen Fehler, wenn ich versuche: if (att.expire). eine Funktion ist ja schließlich, im Gegesatz zu null, ein Objekt.

[kkapsner]

Das ist doch wirklich Mist, dass null den Typ Object hat...
Hab's oben geändert - ein bisschen einfacher als Dormilich vorgeschlagen.
Das mit dem update ist Geschmackssache, aber wenn man auf der sicheren Seite sein will sollte man ja sowieso über getValue() gehen - dann hat man nämlich auch sicherlich den defaultWert, wenn das Cookie nicht existiert.

Edit: Normalerweise mach' ich das ja mit einer internen Funktion is.object die dann die !is['undefined'], die dann is['null'] aufruft.

[Dormilich]

Das ist doch wirklich Mist, dass null den Typ Object hat...

keine Ahnung, warum das noch keiner geändert hat, der Bug ist ja eigentlich schon recht lange bekannt …

[kkapsner]

Am besten gefällt mir in diesem Zusammenhang:

var f = null;
alert(f);
alert(f.toString());

Aber man muss sich hald für seine Überprüfungen seine eigenen Routinen schreiben, die dem Problem aus dem Weg gehen.

[jspit]

So müsste es auch gehen:

   :
 var insert = this.encode(name) + "=" + this.encode(value);
 if (att) 
   {   
   if (att.expire && att.expire.constructor == Date){
      : 

Anstatt ein leeres Object zu setzen den ganzen Zweig garnicht erst ausführen.

[kkapsner]

Ja.