Codice di compatibilità di localStorage

[carlomarx]

Ciao a tutt*,
chi ha seguito questa discussione avrà notato che avevo provato a scrivere un codice di compatibilità dell'oggetto localStorage attraverso l'uso dei cookies. Il codice (leggermente corretto) l'ho postato qua: https://developer.mozilla.org/en/dom...e#localStorage

e lo ritrascrivo sul forum:

if (!window.localStorage) {
	Object.defineProperty(window, "localStorage", new (function () {
		function encode(sEncTxt) {
			return String(sEncTxt).replace(/[;\r\n= %]/g, function(sEncChr) { return "%" + ";\r\n= %".indexOf(sEncChr); });
		}
		function decode(sDecTxt) {
			return sDecTxt.replace(/%[0-5]/g, function(sDecChrs) { return ";\r\n= %".charAt(parseFloat(sDecChrs.slice(1))); });
		}
		var aKeys = [], oStorage = {};
		Object.defineProperty(oStorage, "getItem", {
			value: function (sKey) { return this[sKey]; },
			writable: false,
			configurable: false,
			enumerable: false
		});
		Object.defineProperty(oStorage, "key", {
			value: function (nKeyId) { return aKeys[nKeyId]; },
			writable: false,
			configurable: false,
			enumerable: false
		});
		Object.defineProperty(oStorage, "setItem", {
			value: function (sKey, sValue) {
				if(!sKey) { return; }
				document.cookie = encode(sKey) + "=" + encode(sValue) + "; path=/";
			},
			writable: false,
			configurable: false,
			enumerable: false
		});
		Object.defineProperty(oStorage, "length", {
			get: function () { return aKeys.length; },
			configurable: false,
			enumerable: false
		});
		Object.defineProperty(oStorage, "removeItem", {
			value: function (sKey) {
				if(!sKey) { return; }
				var sExpDate = new Date();
				sExpDate.setDate(sExpDate.getDate() - 1);
				document.cookie = encode(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
			},
			writable: false,
			configurable: false,
			enumerable: false
		});
		this.get = function () {
			var iThisIndx;
			for (var sKey in oStorage) {
				iThisIndx = aKeys.indexOf(sKey);
				if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
				else { aKeys.splice(iThisIndx, 1); }
				delete oStorage[sKey];
			}
			for (var iDelId = 0; iDelId < aKeys.length; iDelId++) {
				oStorage.removeItem(aKeys[iDelId]);
				aKeys.splice(iDelId, 1);
			}
			for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/;\s*/); iCouplId < aCouples.length; iCouplId++) {
				iCouple = aCouples[iCouplId].split("=");
				if (iCouple.length > 1) {
					oStorage[iKey = decode(iCouple[0])] = decode(iCouple[1]);
					aKeys.push(iKey);
				}
			}
			return oStorage;
		};
		this.configurable = false;
		this.enumerable = true;
	})());
}

Adesso mi sorgono due dubbi. Il primo riguarda i cookies. Non ho mai dovuto farci cose particolarmente complesse e mi chiedevo se qualcuno di voi sa quali caratteri devo filtrare. Ovviamente i caratteri ; e = servono alla dichiarazione del cookie, quindi andranno filtrati. Ma ho anche notato che i caratteri \n e \r non vengono ricopiati nel cookie, quindi andranno filtrati anche quelli. Vi giro le due funzioni che servono una a codificare la stringa da salvare come cookie e l'altra a decodificare il contenuto del cookie letto:

		function encode(sEncTxt) {
			return String(sEncTxt).replace(/[;\r\n= %]/g, function(sEncChr) { return "%" + ";\r\n= %".indexOf(sEncChr); });
		}
		function decode(sDecTxt) {
			return sDecTxt.replace(/%[0-5]/g, function(sDecChrs) { return ";\r\n= %".charAt(parseFloat(sDecChrs.slice(1))); });
		}

La mia prima domanda è: qualcun@ sa se devo codificare altri caratteri oltre ai seguenti: ";\r\n= %"??? [Il simbolo di percentuale la devo codificare perché mi serve da metacaratere]

La seconda domanda è: è possibile che non funzioni con IE per quello che sta scritto qua: https://developer.mozilla.org/en/Jav..._specific_case?? Io non ho la possibilità di provarlo con IE 8, c'è qualcun@ che abbia voglia di postare almeno il messaggio di errore? È un peccato che non debba funzionare anche su quel browser per due o tre booleani settati male…

[carlomarx]

È superfluo dire che per testarne il funzionamento sui vari browsers basta forzare la sovrascrittura dell'oggetto localStorage nativo con quest'imitazione – eliminando l'if (!window.localStorage) che sta in testa al codice – e lanciare alert di debug contenenti il responso di document.cookie quando manipoliamo il nuovo localStorage, così:

localStorage.setItem("miaChiave", "ciao mondo!!!");
alert(document.cookie);

Tutti i cookie, anche quelli settati precedentemente, verranno interpretati come chiavi dell'oggetto localStorage. Ma è ininfluente. Anzi, è un vantaggio in più
P.S. Sui browser webkit funzionerà soltanto online.

[Vindav]

da errore "azione non valida per l'oggetto" riferito a questa riga di codice :

Object.defineProperty(oStorage, "getItem", {

Conferma quanto evidenziato nel link che hai postato.

[carlomarx]

Grazie! potresti provare a sostituirlo così??

		Object.defineProperty(oStorage, "getItem", {
			value: function (sKey) { return this[sKey]; },
			writable: true,
			configurable: true,
			enumerable: true
		});

Property attributes must be set to some values. true, true, true for data descriptor and true for configurable, false for enumerable for accessor descriptor. Any attempt to provide other value will result in an error being thrown.

Vedi se l'errore si sposta sulle sei righe successive. Se sì, lo correggo tutto in modo che funzioni e te lo rigiro per un'ultima verifica. Ma può anche essere che effettivamente Object.defineProperty funzioni solo con oggetti del DOM in IE8 (non l'ho mica capito bene ), e allora pace ( ). Incrociamo le dita

[carlomarx]

Mmm... stavo pensando che per il contenuto dei cookie, invece delle mie funzioni encode e decode, potrei usare le funzioni native escape e unescape, forse sarebbe un modo per andare sul sicuro. Ma farebbero aumentare la mole di dati salvati. E i cookie sono fortemente limitanti in questo.

[carlomarx]

Originariamente inviato da carlomarx
Grazie! potresti provare a sostituirlo così??

		Object.defineProperty(oStorage, "getItem", {
			value: function (sKey) { return this[sKey]; },
			writable: true,
			configurable: true,
			enumerable: true
		});

[…]

No, tanto è inutile. Il funzionamento dell'algoritmo si basa sul presupposto che quelle chiavi non siano numerabili. A questo punto l'unica utilità di tutto il codice è che gli si potrebbe cambiare nome e renderlo a tutti gli effetti un gestore dei cookies dal funzionamento simile al localStorage (togliendolo quindi dall'if iniziale).

[carlomarx]

Bene bene, ho sfrondato di molto il codice e ho creato un codice di compatibilità sicuramente compatibile con i vecchi browsers, IE compreso! Ovviamente ci sono meno funzionalità, ma si tratta di poca cosa. L'unica differenza è che non si potrà accedere, eliminare o impostare una chiave con l metodi localStorage.tuaChiave, delete localStorage.tuaChiave, localStorage.tuaChiave = tuoValore, si dovranno per forza utilizzare i metodi localStorage.getItem("tuaChiave"), localStorage.removeItem("tuaChiave") e localStorage.setItem("tuaChiave", "tuoValore"). Il metodo localStorage.hasOwnProperty("tuaChiave") è stato invece correttamente implementato. Chi si fa avanti con un test? Questo deve per forza funzionare!!!!! Basta aprire con una vecchia versione di IE la pagina che incollo qui…

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">
if (!window.localStorage) {
	window.localStorage = {
		getItem: function (sKey) {
			for (var aCookies = document.cookie.split(/;\s*/), iIdx = 0; iIdx < aCookies.length; iIdx++) {
				if (aCookies[iIdx].indexOf(escape(sKey) + "=")) { continue; }
				return unescape(aCookies[iIdx].slice(aCookies[iIdx].indexOf("=") + 1));
			}
			return null;
		},
		key: function (nKeyId) { return unescape(document.cookie.replace(/\=(?:.(?!;))*$/, "").split(/\=(?:.(?!;))*.;\s*/)[nKeyId]); },
		setItem: function (sKey, sValue) {
			if(!sKey) { return; }
			document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
		},
		removeItem: function (sKey) {
			if(!sKey) { return; }
			var sExpDate = new Date();
			sExpDate.setDate(sExpDate.getDate() - 1);
			document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
		},
		hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\=")).test(document.cookie); }
	};
	// Object.freeze(localStorage);
}

localStorage.setItem("testChiave", "Funziona alla perfezione!!!");
alert(localStorage.getItem("testChiave"));

</script>
</head>
<body></body>
</html>

Come di consueto, il codice è stato postato anche qua: https://developer.mozilla.org/en/DOM..._compatibility.
P.S. Questa volta il codice è persino più esiguo delle funzioni che generalmente si trovano in rete per manipolare i cookies

[carlomarx]

Ho sfrondato ulteriormente e aggiunto la proprietà length, di cui mi ero completamente dimenticato… Giro il nuovo codice aggiornato per il test su IE.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">
if (!window.localStorage) {
	window.localStorage = {
		getItem: function (sKey) { return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\=((?:[^;](?!;))*[^;]?)(?:;.*)?|.*"), "$1")) || null; },
		key: function (nKeyId) { return unescape(document.cookie.replace(/\=(?:.(?!;))*$/, "").split(/\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
		setItem: function (sKey, sValue) {
			if(!sKey) { return; }
			document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
			this.length = document.cookie.match(/\=/g).length;
		},
		length: 0,
		removeItem: function (sKey) {
			if(!sKey) { return; }
			var sExpDate = new Date();
			sExpDate.setDate(sExpDate.getDate() - 1);
			document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
			this.length--;
		},
		hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\=")).test(document.cookie); }
	};
	window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

localStorage.setItem("testChiave", "Funziona alla perfezione!!!");
alert(localStorage.getItem("testChiave"));

</script>
</head>
<body></body>
</html>

[Vindav]

il test ha dato esito positivo.

p.s. l'ho provato con IE 6

[carlomarx]

Evvaiiii :-) Grazie!