[学习笔记]JS计数器，闭包和localStorage

1.前言

Javascript也算用了挺久了，为了得到一个变量，类似Java的静态变量的功能，我想到了很早以前学习JS的闭包，还有做俄罗斯方块的排行榜用到LocalStorage技术，所以想总结一下，分享给大家，也算是作为笔记记载了。

2.代码

<!DOCTYPE html>
<html>
<head>
	<title>JS Counter Test</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">

	$().ready(function(){
		
	//*************counter0*************//
		function counter0(){
			var num = 0;
			// function ()， it was the same.
			return function plus(){				
				return num ++;
			}
			//plus();	
		};
　　　　　　　　　//执行counter0时，里面的return，直接返回了其内容　,并没有执行plus方法，此案例用来对比，满足好奇心。
		$('#b0').click(function(){
			$('#c0').html("Num0="+counter0());
		});
	//*************counter1*************//
		function counter1(){
			var num = 0;
			function plus(){		
				return num ++;
			}
			plus();			
			return num;
		};
　　　　　　　　　　//和counter0比较，执行了plus方法，这个就是闭包的前身了，但是每次调用counter1，plus只能执行一次，所以每次值都是1
		$('#b1').click(function(){
			$('#c1').html("Num0="+counter1());
		});		
	//*************counter2*************//
		var c2 = (function counter2(){
			var num = 0;
			return function (){			
				return num ++;
			}

		})();
　　　　　　　　　　//闭包的正确玩法，方法里面写一个匿名方法或者有名称的方法都行
		$('#b2').click(function(){
			$('#c2').html("Num2="+c2());
		});

	//*************counter3*************//
		var c3 = (function counter3(){
			var num = 0;
			return function plus(){			
				return num ++;
			}

		})();
　　　　　　　　　　//闭包里面方法可以匿名也可以有名称
		$('#b3').click(function(){
			$('#c3').html("Num3="+c3());
		});

	//*************counter4*************//
　　　　　　　　//使用Html5本地存储技术，只要不要关了浏览器，即Session一直存在，就可以保存变量，刷新页面也存在
		function counter4(){
			if(typeof(Storage)!=="undefined"){				
				var num = localStorage.getItem("pageviews");
				if (num != null){
					localStorage.setItem("pageviews", Number(num) + 1);
				}else{
					localStorage.setItem("pageviews", 1);
					num = 1;
				}
				$('#c4').html("Num4="+num);
			}else{
				$('#c4').html("Sorry, Your browser is unable to support web storage");
			}
		}

		$('#b4').click(function(){
			counter4();
		});

		$('#reset4').click(function(){
			localStorage.clear();
			$('#c4').html("Num4=0");
		});

		//refresh will exeute every time.
		counter4();

	});

	</script>
</head>
<body>
	<h3>JS Counter</h3>
	<button id="b0">Click Btn0</button>
	<div id="c0">line zero</div>
	<button id="b1">Click Btn1</button>
	<div id="c1">line one</div>
	<button id="b2">Click Btn2</button>
	<div id="c2">line two</div>
	<button id="b3">Click Btn3</button>
	<div id="c3">line three</div>
	<button id="b4">Click Btn4</button>	 <button id="reset4">Rest Num4</button>
	<div id="c4"></div>
</body>
</html>

闭包：有权访问另一个函数作用域内变量的函数都是闭包。

例如上面例子中counter方法里面的匿名或者有名称的方法。那你也许有疑惑，为啥后面调用counter2中num值是有记忆的呢？因为如果没有内部方法，使用了num变量，使得counter2方法使用完，变量num要被回收，但是又被另一个函数使用，即变量被引用，所以不会被回收了，因此可以利用这个特性来封装一个私有变量。

3.结果图

3.1初始化时的界面

3.2各自点击一次button

说明：Num2和Num3都是0的原因在于return num++; 是返回num +1前的num值，故此处为0。.

3.3前三个button各自点击3下，Btn3点击4下，Btn4点击6下。

4.结束语

闭包当然还可以使得对象中变量变成私有变量。

[学习笔记]JS计数器，闭包和localStorage

推荐阅读