lebbe/testStorageAbilities.html

## testStorageAbilities.html
<!--

Something I threw together to test storage abilities in different browsers.

This test two forms of session storages: html 5 session storages, and the window.name fallback option.
It also tests two forms of persistent storage: html 5 local storage and cookies.

Intended usage:

Upload the html file to your web-server.
- Open the page from the browser you want to test, and click "Set all".
- Refresh the browser and see which is working on a session basis.
- Close the browser and open it again
- Visit the same page and see which is working on a persistent basis.

Lars-Erik Bruce
-->

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<style type="text/css">
.test {
    height: 40px;
    border: 1px solid black;
    margin-top: 5px;
}

.red {
    color: red;
}

.green {
    color: green;
}

</style>
</head>


<script type="text/javascript">
try {
  var object = JSON.parse(window.name);
	if(!typeof object === "object")
		window.name = JSON.stringify(new Object());
} catch(err) {
	window.name = JSON.stringify(new Object());
}
/*
 * If we do not have local storage, we make our own with window.name.
 ****/
function setItem(key, val) {
	tmp = JSON.parse(window.name);
	tmp[key] = val;
	window.name = JSON.stringify(tmp);
}

function getItem(key) {
	tmp = JSON.parse(window.name);
	return tmp[key];
}

function removeItem (key) {
	tmp = JSON.parse(window.name);
	delete tmp[key];
	window.name = JSON.stringify(tmp);
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function setAll() {
	// Window name
	setItem("test", "Hello world.");
	// local storage
	window.localStorage.setItem("test", "Hello world.");
	// Session storage
	window.sessionStorage.setItem("test", "Hello world.");
	// Cookie
	createCookie("test", "Hello world.", 10);
}


function removeAll() {
	// Window name
	removeItem("test");
	// local storage
	window.localStorage.removeItem("test");
	// Session storage
	window.sessionStorage.removeItem("test");
	// Cookie
	eraseCookie("test");
}
</script>
<body>


<div class="test">
Reading variable "test" with value "Hello world." in session storage.
<script type="text/javascript">
(new function() {
	var result = window.sessionStorage.getItem("test");
	if(result === "Hello world.") {
		document.write('<span class="green">OK.</span>');
	} else {
		document.write('<span class="red">ERR.</span>');
	}
});
</script>
</div>

<div class="test">
Reading variable "test" with value "Hello world." in local storage.

<script type="text/javascript">
(new function() {
	var result = window.localStorage.getItem("test");
	if(result === "Hello world.") {
		document.write('<span class="green">OK.</span>');
	} else {
		document.write('<span class="red">ERR.</span>');
	}
});
</script>
</div>

<div class="test">
Reading variable "test" with value "Hello world." in window name.

<script type="text/javascript">
(new function() {
	var result = getItem("test");
	if(result === "Hello world.") {
		document.write('<span class="green">OK.</span>');
	} else {
		document.write('<span class="red">ERR.</span>');
	}
});
</script>
</div>

<div class="test">
Reading variable "test" with value "Hello world." in cookie.


<script type="text/javascript">
(new function() {
	var result = readCookie("test");
	if(result === "Hello world.") {
		document.write('<span class="green">OK.</span>');
	} else {
		document.write('<span class="red">ERR.</span>');
	}
});
</script>
</div>


<button onclick="setAll()" >Set all</button>
<button onclick="removeAll()" >Remove all</button>

<p />
User agent string:
<p>
<script type="text/javascript">
document.write('"' + navigator.userAgent + '""');
</script>
</p>
</body>
</html>
	<!--

	Something I threw together to test storage abilities in different browsers.

	This test two forms of session storages: html 5 session storages, and the window.name fallback option.
	It also tests two forms of persistent storage: html 5 local storage and cookies.

	Intended usage:

	Upload the html file to your web-server.
	- Open the page from the browser you want to test, and click "Set all".
	- Refresh the browser and see which is working on a session basis.
	- Close the browser and open it again
	- Visit the same page and see which is working on a persistent basis.

	Lars-Erik Bruce
	-->

	<html>
	<head>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

	<style type="text/css">
	.test {
	height: 40px;
	border: 1px solid black;
	margin-top: 5px;
	}

	.red {
	color: red;
	}

	.green {
	color: green;
	}

	</style>
	</head>


	<script type="text/javascript">
	try {
	var object = JSON.parse(window.name);
	if(!typeof object === "object")
	window.name = JSON.stringify(new Object());
	} catch(err) {
	window.name = JSON.stringify(new Object());
	}
	/*
	* If we do not have local storage, we make our own with window.name.
	****/
	function setItem(key, val) {
	tmp = JSON.parse(window.name);
	tmp[key] = val;
	window.name = JSON.stringify(tmp);
	}

	function getItem(key) {
	tmp = JSON.parse(window.name);
	return tmp[key];
	}

	function removeItem (key) {
	tmp = JSON.parse(window.name);
	delete tmp[key];
	window.name = JSON.stringify(tmp);
	}

	function createCookie(name,value,days) {
	if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days2460601000));
	var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
	}

	function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
	}

	function eraseCookie(name) {
	createCookie(name,"",-1);
	}

	function setAll() {
	// Window name
	setItem("test", "Hello world.");
	// local storage
	window.localStorage.setItem("test", "Hello world.");
	// Session storage
	window.sessionStorage.setItem("test", "Hello world.");
	// Cookie
	createCookie("test", "Hello world.", 10);
	}


	function removeAll() {
	// Window name
	removeItem("test");
	// local storage
	window.localStorage.removeItem("test");
	// Session storage
	window.sessionStorage.removeItem("test");
	// Cookie
	eraseCookie("test");
	}
	</script>
	<body>


	<div class="test">
	Reading variable "test" with value "Hello world." in session storage.
	<script type="text/javascript">
	(new function() {
	var result = window.sessionStorage.getItem("test");
	if(result === "Hello world.") {
	document.write('<span class="green">OK.</span>');
	} else {
	document.write('<span class="red">ERR.</span>');
	}
	});
	</script>
	</div>

	<div class="test">
	Reading variable "test" with value "Hello world." in local storage.

	<script type="text/javascript">
	(new function() {
	var result = window.localStorage.getItem("test");
	if(result === "Hello world.") {
	document.write('<span class="green">OK.</span>');
	} else {
	document.write('<span class="red">ERR.</span>');
	}
	});
	</script>
	</div>

	<div class="test">
	Reading variable "test" with value "Hello world." in window name.

	<script type="text/javascript">
	(new function() {
	var result = getItem("test");
	if(result === "Hello world.") {
	document.write('<span class="green">OK.</span>');
	} else {
	document.write('<span class="red">ERR.</span>');
	}
	});
	</script>
	</div>

	<div class="test">
	Reading variable "test" with value "Hello world." in cookie.


	<script type="text/javascript">
	(new function() {
	var result = readCookie("test");
	if(result === "Hello world.") {
	document.write('<span class="green">OK.</span>');
	} else {
	document.write('<span class="red">ERR.</span>');
	}
	});
	</script>
	</div>


	<button onclick="setAll()" >Set all</button>
	<button onclick="removeAll()" >Remove all</button>

	<p />
	User agent string:
	<p>
	<script type="text/javascript">
	document.write('"' + navigator.userAgent + '""');
	</script>
	</p>
	</body>
	</html>