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的更多相关文章

  1. [学习笔记]JS中闭包的理解

    一.闭包概念的理解 闭包,又称为词法闭包或函数闭包指引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外. 自由变量:该变量既不是函数本身定义的也不是函数 ...

  2. amazeui学习笔记--js插件（UI增强）--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  3. amazeui学习笔记--js插件（UI增强4）--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...

  4. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

  5. amazeui学习笔记--js插件（UI增强2）--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  6. 前端学习:学习笔记(JS部分）

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  7. JavaScript学习笔记——JS中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...

  8. [学习笔记]JS 数组Array push相关问题

    前言: 今天用写了一个二维数组,都赋值为零,然后更新其中一个值,结果和预期是不一样,会整列的相同位置都是同一个值. 1.用Chrome的控制台样例如下: arrs[2][2] =1的赋值,竟然是三个数 ...

  9. js学习笔记—转载（闭包问题）

    ---恢复内容开始--- 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.     一.变量的作用域 要理解闭包,首先必须理解Javascrip ...

随机推荐

  1. 【POJ3349】snowflakes

    这是一道可以练习哈希表的模板题.关于哈希表的操作均有涉及. 哈希函数的选取是这道题的关键.这道题的关键字是一个长度为6的序列,并且序列与开始顺序.时钟顺序均无关. 因此,采用哈希函数\(H[x]=\S ...

  2. 走进JVM之一 自己编译openjdk源码

    想要深入了解JVM,就必须了解其实现机制.了解JVM实现的最好方法便是自己动手编译JDK.好了,让我们开始吧! 1.  准备工作 获取OpenJDK源码 本次编译选择的是OpenJDK7u,官方源码包 ...

  3. Docker跨主机网络解决方案

    前言:前面的部分一直都是单机跑docker,但实际生产环境不可能只用一台来跑.肯定会用到多台,因为他们都是内部私有ip,那么多台主机之间的容器如何通信?这个是个很头疼的问题!目前主流几种方法如下:1. ...

  4. 过时date.toLocaleString()的解决方法

    System.out.println(new java.util.Date()); 输出:Thu Jan 27 14:43:28 CST 2011 System.out.println(new jav ...

  5. java基础-Eclipse开发工具介绍

    java基础-Eclipse开发工具介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 所谓工欲善其事必先利其器,即将身为一名Java开发工程师怎么能没有一款好使的IDE呢?今天就 ...

  6. Scala进阶之路-Scala中的枚举用法案例展示

    Scala进阶之路-Scala中的枚举用法案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Scala中的枚举值和Java中的枚举值有点差别,不过使用起来也都差大同小异,我这 ...

  7. Web压力测试工具 LoadRunner12.x简易入门教程--（一）回放与录制

        LoadRunner12.x简易入门教程--(一)回放与录制 今天在这里分享一下LoadRunner12.x版本的入门使用方法,希望对刚接触LoadRunner的童鞋有所帮助. LoadRun ...

  8. java查看当前项目所有线程列表界面【转】

    java查看当前项目所有线程列表界面 1.TestThread(测试类) package com.testdemo.pcis.isc.job.king.panel; public class Test ...

  9. Study 3 —— Python运算符

    参考资料:http://www.runoob.com/python/python-operators.html#ysf2 定义变量: a = 10, b = 20 算术运算符: 运算符   描述 实例 ...

  10. 使用Spring时web.xml中的配置

    使用Spring时web.xml中的配置: <?xml version="1.0" encoding="UTF-8"?> <web-app x ...