[学习笔记]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的更多相关文章
- [学习笔记]JS中闭包的理解
一.闭包概念的理解 闭包,又称为词法闭包或函数闭包指引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外. 自由变量:该变量既不是函数本身定义的也不是函数 ...
- amazeui学习笔记--js插件（UI增强）--警告框Alert
amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...
- amazeui学习笔记--js插件（UI增强4）--下拉组件Dropdown
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...
- amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- amazeui学习笔记--js插件（UI增强2）--按钮交互Button
amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
- [学习笔记]JS 数组Array push相关问题
前言: 今天用写了一个二维数组,都赋值为零,然后更新其中一个值,结果和预期是不一样,会整列的相同位置都是同一个值. 1.用Chrome的控制台样例如下: arrs[2][2] =1的赋值,竟然是三个数 ...
- js学习笔记—转载（闭包问题）
---恢复内容开始--- 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascrip ...
随机推荐
- （转）Redis的那些最常见面试问题
背景:最近在准备面试相关的题目,发现redis基本一片空白,有必要好好总结下. 转自:https://www.cnblogs.com/Survivalist/p/8119891.html 1.什么是r ...
- 简单的使用gulp生成雪碧图
有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...
- PrintNumber.java
/****************************************************************************** * Compilation: javac ...
- MUI 当input聚焦之后，弹出自带的键盘之后，内容往上移动
1)有时候为了用户更好的体验,当input聚焦之后,手机自带的键盘弹出的时候,页面的内容也要跟着滚动,好让键盘不遮住input 只要把input标签放到mui-content这个类里面就可以了 < ...
- nginx设置反向代理后端jenklins，页面上的js css文件无法加载
转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...
- Linux 防火墙iptables开放特定端口
1.查看状态:iptables -L -n2.直接编辑:vi /etc/sysconfig/iptables3.端口开放:-A INPUT -m state --state NEW -m tcp -p ...
- vue2.0 之列表渲染-v-for
v-for 数组渲染 App.vue代码 <template> <div> <ul> <li v-for="item in list"&g ...
- 盖得化工----requests/bs4---采集二级网址
Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...
- Java编程思想 学习笔记3
三.操作符 1.优先级 当一个表达式中存在多个操作符时,操作符的优先级就决定了各部分的计算顺序.程序员常常忘记其他优先级规则,所以应该用括号明确规定计算顺序. 当编译器观察到一个String后面紧跟着 ...
- Spring session(redis存储方式)监听导致创建大量redisMessageListenerContailner-X线程
待解决的问题 Spring session(redis存储方式)监听导致创建大量redisMessageListenerContailner-X线程 解决办法 为spring session添加spr ...