<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>使用window.localStorage，window.localStorage记录点击次数</title>

</head>

<body>

	<button onclick="bc()">点击</button>

	<div id="result"></div>

	<script>

		//这里使用的window.localStorage 本地存储，一般存储5M，不同浏览器不同，只要不手动删除，则永久存储

		/*function bc(){

			//判断浏览器是否支持storage，不支持则提示

			console.log(window.localStorage);

			if (window.localStorage) {

				if (localStorage.count) {

					//因为localStorage只支持string类型的存储，所以这里必须转化为int 类型才可以自加

					localStorage.count = parseInt(localStorage.count)+1;

				}else{

					//localStorage 只支持 string 类型的存储，即使下面的count = 1 ，那么也会自动存储为String类型

					localStorage.count=1;

				}

				document.getElementById("result").innerHTML= localStorage.count;

			}else{

				alert('您的浏览器不支持window.localStorage');

			}

		}*/

		//这里使用window.sessionStorage 会话存储，最多

		function bc(){

			if (window.sessionStorage) {

				if(window.sessionStorage.count){

					//因为sessionStorage只支持string类型的存储，所以这里必须转化为int 类型才可以自加

					window.sessionStorage.count = parseInt(window.sessionStorage.count) + 1;

				}else{

					//sessionStorage 只支持 string 类型的存储，即使下面的count = 1 ，那么也会自动存储为String类型

					window.sessionStorage.count = 1;

				}

				document.getElementById('result').innerHTML = window.sessionStorage.count;

			}else{

				alert('您的浏览器不支持window.sessionStorage');

			}

		}

	</script>

</body>

</html>

localStorage  sessionStorage 两个一毛一样

有三种写入方式：

var storage=window.localStorage;

//写入a字段

storage["a"]=1;

//写入b字段

storage.b=1;

//写入c字段

storage.setItem("c",3);

　

以下是随机生成一个　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>localStorage,sessionStorage</title>

</head>

<body>

	<button onclick="cl()">点击</button>

	<div id="pg">您暂时还没有点击</div>

	<script>

		// 随机生成一个名字

		function count(){

			var arrs = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];

			var str = '';

			while(true){

				//随机生成一个名称

				for (var i = 0; i < 1; i++) {

					var g = Math.floor(Math.random()*arrs.length);

					str += arrs[g];

				}

				//判断是否已经存在localStorage.str

				if (localStorage.str) {

					alert(111);

					continue;

				}

				return str;

			}

		}

		var count = count();

		//

		function cl(){

			if (localStorage) {

				if (localStorage.count) {

					//localStorage.count属性不存在返回undefined，

					//localStorage 中的 key/value 中 value的值都是以string类型存在的。

					//所以下面进行自加时，必须把localStorage转化为number数据类型。

					localStorage.count = parseInt(localStorage.count) + 1;

				}else{

					localStorage.count = 1;

				}

				document.getElementById('pg').innerHTML = '您已经点击了' + localStorage.count + '次了';

			}else{

				alert('您的浏览器不支持localStorage');

			}

		}

	</script>

</body>

</html>

　　

使用window.localStorage，window.localStorage记录点击次数的更多相关文章

  1. window.location.href问题，点击，跳转到首页

    onClick="window.location.href='./';" 点击,跳转到首页. location.href=url Js中实现跳转 window.location.h ...

  2. localStorage点击次数存储

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教 ...

  3. window.parent != window 解决界面嵌套问题

    页面在被嵌套的时,效果:,,如果用户点击“刷新”,该问题即可解决. 如果想通过代码解决的话,这个问题属于客户端的问题,不是服务器端的问题. 如果直接写:window.location.href = “ ...

  4. jquery/js记录点击事件，单击次数加一，双击清零

    目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...

  5. window.parent ,window.top,window.self 详解及parent和opener的区别

    window.parent ,window.top,window.self 详解 在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层fr ...

  6. 关于 window.parent, window.top, window.self 详解

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口,opener是用open方法打 ...

  7. jquery源码中的(function(window, undefined){})(window)【转】

    (function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ...

  8. JS 关于(function( window, undefined ) {})(window)写法的理解

    JS 关于(function( window, undefined ) {})(window)写法的理解 [网络整理] (function( window, undefined ) {})(windo ...

  9. Javascript 中的window.parent ,window.top,window.self 详解

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...

随机推荐

  1. QRCode.js：使用 JavaScript 生成微信二维码

    https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...

  2. 2、在NET中实现多线程

    1.System.Threading命名空间 System.Threading命名空间提供了使得可以多线程编程的类和接口 其中 (1)Thread类构成了C#多线程编程的支柱,他用于创建并控制线程 ( ...

  3. 1 matplotlib绘制折线图

    from matplotlib import pyplot as plt #设置图形大小 plt.figure(figsize=(20,8),dpi=80) plt.plot(x,y,color=&q ...

  4. python预习day1

    计算机基础 cpu 大脑 内存 临时记忆 硬盘 永久记忆 输入设备 眼睛 耳朵 输出设备 嘴巴 操作系统 控制计算机硬件工作流程的 应用程序 安装在操作系统之上的软件 python简介 python是 ...

  5. Java自学-控制流程 for

    Java的for循环 for循环,和while一样,只是表达方式不一样 示例 1 : for 比较for和while public class HelloWorld { public static v ...

  6. 笔谈AudioToolbox（一）

    “五一”长假过的真快,三天就这么过去了.新的一周开始了,这周搞搞iOS平台上音频的解码与播放.动手咯,切入AudioToolbox.framework的学习,这个库太强大了,要想彻底弄懂不简单,从某种 ...

  7. C#操作mongodb（聚合函数）-分组找出每组的最大值

    public static void OnQuery_QXData(string DBName, string tablename,string layername)        {         ...

  8. Python——生成器&推导式

    生成器 生成器的本质就是迭代器,那么还为什么有生成器呢,两者唯一的不同就是迭代器都是Python给你提供能够的已经写好的工具或者通过数据转化得来的.而生成器是需要我们自己用Python代码构建的工具. ...

  9. 谈谈OAuth1,OAuth2异同

    ##一.写在前面在收集资料时,我查询和学习了许多介绍OAuth的文章,这些文章有好有坏,但大多是从个例出发.因此我想从官方文档出发,结合在stackoverflow上的一些讨论,一并整理一下.整理的内 ...

  10. Mysql中innodb和myisam

    innodb和myisam两种存储引擎的区别 1.事务和外键 1)InnoDB具有事务,支持4个事务隔离级别,回滚,崩溃修复能力和多版本并发的事务安全,包括ACID.如果应用中需要执行大量的INSER ...