Foregotten1/html5 notepad

## html5 notepad
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>HTML5 notepad</title>
<meta charset="utf-8">
<style>
html,body{background:#FCFCFC;color:#444;height:100%;width:100%;margin:0;padding:0;}
#notepad, #notepad2{font-size:100%; font-family:san-serif}
::selection{background:#7D7}
::-moz-selection{background:#7D7}
textarea {
  width: 600px;
  height: 800px;
  resize: none;
}
</style>
</head>
<body>
<table width="800" border="1" cellspacing="2" cellpadding="2">
  <tr>
    <th width="600" scope="col">Notepad 1</th>
    <th width="600" scope="col">Notepad 2</th>
  </tr>
  <tr>
    <td height="820">
<textarea id="notepad">
<!--
  you could do any element w/ contentEditable, but that doesn't fire onchange
-->
</textarea></td>
    <td><textarea id="notepad2">
<!--
  you could do any element w/ contentEditable, but that doesn't fire onchange
-->
</textarea></td>
  </tr>
</table>

<BR>

<script>
/* localstorage polyfill from https://gist.github.com/350433 */
("undefined"==typeof window.localStorage||"undefined"==typeof window.sessionStorage)&&function(){function e(f){function e(a){var b;b=new Date;b.setTime(b.getTime()+31536E6);document.cookie="localStorage="+a+("; expires="+b.toGMTString())+"; path=/"}function g(a){a=JSON.stringify(a);"session"==f?window.name=a:e(a)}var d=function(){var a;if("session"==f)a=window.name;else a:{a=document.cookie.split(";");var b,c;for(b=0;b<a.length;b++){for(c=a[b];" "==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf("localStorage=")){a=
c.substring(13,c.length);break a}}a=null}return a?JSON.parse(a):{}}();return{length:0,clear:function(){d={};this.length=0;"session"==f?window.name="":e("")},getItem:function(a){return void 0===d[a]?null:d[a]},key:function(a){var b=0,c;for(c in d){if(b==a)return c;b++}return null},removeItem:function(a){delete d[a];this.length--;g(d)},setItem:function(a,b){d[a]=b+"";this.length++;g(d)}}}if("undefined"==typeof window.localStorage)window.localStorage=new e("local");if("undefined"==typeof window.sessionStorage)window.sessionStorage=
new e("session")}();

/* the code */
	var n = document.getElementById("notepad");
	/* save */
	var s = function(){localStorage.setItem("notepad", n.value);}
	/* retrieve (only on page load) */
	if(window.localStorage){ n.value = localStorage.getItem("notepad");}
	/* autosave onchange and every 500ms and when you close the window */
	n.onchange = s();
	setInterval( s, 500);
	window.onunload = s();

	var x = document.getElementById("notepad2");
	/* save */
	var y = function(){localStorage.setItem("notepad2", x.value);}
	/* retrieve (only on page load) */
	if(window.localStorage){ x.value = localStorage.getItem("notepad2");}
	/* autosave onchange and every 500ms and when you close the window */
	x.onchange = y();
	setInterval( y, 500);
	window.onunload = y();
</script>
</body>
</html>

## html5notepad-small
<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>
	<!DOCTYPE html>
	<html><head><meta charset="UTF-8">
	<title>HTML5 notepad</title>
	<meta charset="utf-8">
	<style>
	html,body{background:#FCFCFC;color:#444;height:100%;width:100%;margin:0;padding:0;}
	#notepad, #notepad2{font-size:100%; font-family:san-serif}
	::selection{background:#7D7}
	::-moz-selection{background:#7D7}
	textarea {
	width: 600px;
	height: 800px;
	resize: none;
	}
	</style>
	</head>
	<body>
	<table width="800" border="1" cellspacing="2" cellpadding="2">
	<tr>
	<th width="600" scope="col">Notepad 1</th>
	<th width="600" scope="col">Notepad 2</th>
	</tr>
	<tr>
	<td height="820">
	<textarea id="notepad">
	<!--
	you could do any element w/ contentEditable, but that doesn't fire onchange
	-->
	</textarea></td>
	<td><textarea id="notepad2">
	<!--
	you could do any element w/ contentEditable, but that doesn't fire onchange
	-->
	</textarea></td>
	</tr>
	</table>

	<BR>

	<script>
	/* localstorage polyfill from https://gist.github.com/350433 */
	("undefined"==typeof window.localStorage\|\|"undefined"==typeof window.sessionStorage)&&function(){function e(f){function e(a){var b;b=new Date;b.setTime(b.getTime()+31536E6);document.cookie="localStorage="+a+("; expires="+b.toGMTString())+"; path=/"}function g(a){a=JSON.stringify(a);"session"==f?window.name=a:e(a)}var d=function(){var a;if("session"==f)a=window.name;else a:{a=document.cookie.split(";");var b,c;for(b=0;b<a.length;b++){for(c=a[b];" "==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf("localStorage=")){a=
	c.substring(13,c.length);break a}}a=null}return a?JSON.parse(a):{}}();return{length:0,clear:function(){d={};this.length=0;"session"==f?window.name="":e("")},getItem:function(a){return void 0===d[a]?null:d[a]},key:function(a){var b=0,c;for(c in d){if(b==a)return c;b++}return null},removeItem:function(a){delete d[a];this.length--;g(d)},setItem:function(a,b){d[a]=b+"";this.length++;g(d)}}}if("undefined"==typeof window.localStorage)window.localStorage=new e("local");if("undefined"==typeof window.sessionStorage)window.sessionStorage=
	new e("session")}();

	/* the code */
	var n = document.getElementById("notepad");
	/* save */
	var s = function(){localStorage.setItem("notepad", n.value);}
	/* retrieve (only on page load) */
	if(window.localStorage){ n.value = localStorage.getItem("notepad");}
	/* autosave onchange and every 500ms and when you close the window */
	n.onchange = s();
	setInterval( s, 500);
	window.onunload = s();

	var x = document.getElementById("notepad2");
	/* save */
	var y = function(){localStorage.setItem("notepad2", x.value);}
	/* retrieve (only on page load) */
	if(window.localStorage){ x.value = localStorage.getItem("notepad2");}
	/* autosave onchange and every 500ms and when you close the window */
	x.onchange = y();
	setInterval( y, 500);
	window.onunload = y();
	</script>
	</body>
	</html>