praveenpuglia/localStorageTest.html

## localStorageTest.html
<!DOCTYPE html>
<html>
<head>
  <title>Local Storage</title>
</head>
<body>
<form action="">
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
	Draft last saved at : --- <div id="updateTime"></div>
	<input type="submit">
</form>

<script src = "http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
//detect the support for local storage
if(Modernizr.localstorage)
{
		//get the comment box from the dom.
		var commentBox = $("#comment"), updateInterval;
		var updateTime = $("#updateTime");
		console.log(commentBox);


		//if comment is available in local storage, then populate the field with that value.

		// !!localStorage.comment && commentBox.val(localStorage.comment);

		if(localStorage.comment)
		{
			commentBox.val(localStorage.comment);
			updateTime.html(localStorage.lastSaveTime);
		}

		//while focusing on the comment box, run the interval
		commentBox.on('focus', function(){
			updateInterval = setInterval(function(){

				//change the date and time in the update box.
				var lastSaveTime = new Date();
				updateTime.html(lastSaveTime);

				//save the content of the content box.
				localStorage.comment = commentBox.val();
				localStorage.lastSaveTime = lastSaveTime;

			}, 5000); //remember the time is going to be in m.seconds
		});

		//when the user is not focused on the element, stop the interval.
		commentBox.on("blur",function(){
			clearInterval(updateInterval);
		});
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Local Storage</title>
	</head>
	<body>
	<form action="">
	<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
	Draft last saved at : --- <div id="updateTime"></div>
	<input type="submit">
	</form>

	<script src = "http://modernizr.com/downloads/modernizr-latest.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script>
	//detect the support for local storage
	if(Modernizr.localstorage)
	{
	//get the comment box from the dom.
	var commentBox = $("#comment"), updateInterval;
	var updateTime = $("#updateTime");
	console.log(commentBox);


	//if comment is available in local storage, then populate the field with that value.

	// !!localStorage.comment && commentBox.val(localStorage.comment);

	if(localStorage.comment)
	{
	commentBox.val(localStorage.comment);
	updateTime.html(localStorage.lastSaveTime);
	}

	//while focusing on the comment box, run the interval
	commentBox.on('focus', function(){
	updateInterval = setInterval(function(){

	//change the date and time in the update box.
	var lastSaveTime = new Date();
	updateTime.html(lastSaveTime);

	//save the content of the content box.
	localStorage.comment = commentBox.val();
	localStorage.lastSaveTime = lastSaveTime;

	}, 5000); //remember the time is going to be in m.seconds
	});

	//when the user is not focused on the element, stop the interval.
	commentBox.on("blur",function(){
	clearInterval(updateInterval);
	});
	}
	</script>
	</body>
	</html>