<!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. SQL SERVER 数据库查询表信息

    SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号 = a.colorder, 字段名 = ...

  2. Docker之Alpine制作镜像且上传至阿里云

    目的: Alpine制作jdk镜像 Alpine制作jre镜像(瘦身) Docker镜像上传至阿里云 Alpine制作jdk镜像 alpine Linux简介 Alpine Linux是一个轻型Lin ...

  3. pytest_01-环境准备与入门

    前言 首先说下为什么要学pytest,在此之前相信大家已经掌握了python里面的unittest单元测试框架,那再学一个框架肯定是需要学习时间成本的. 刚开始我的内心是拒绝的,我想我用unittes ...

  4. MOOC 数据库笔记（三）：关系模型之基本概念

    关系模型的基本概念 关系模型简述 1.最早由E.F.Codd在1970年提出. 2.是从表(Table)及表的处理方式中抽象出来的,是在对传统表及其操作进行数学化严格定义的基础上,引入集合理论与逻辑学 ...

  5. 3.使用 Code First 迁移更新数据库

    1.更新 SeedData 类,使它提供新列的值. 示例更改如下所示,但可能需要对每个 new Movie 块做出此更改. context.Movie.AddRange( new Movie { Ti ...

  6. Angular中ViewChild\ngAfterViewInit\Promise的使用，在父组件初始化时等待子组件的返回值

    1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...

  7. PS利用蒙版抠图

    扣图除了用锁套工具外,用蒙版时一个比较快的方法. 前期准备 首先准备一个PS CS6和一个神仙姐姐,一定要先Ctrl+J复制一份图层(不然待会神仙姐姐就找不到了). 使用色阶及反相获取轮廓 使用色阶使 ...

  8. data:image/png;base64应用

    原文:https://blog.csdn.net/deng_xj/article/details/93731850 data:image/png;base64应用 我们知道任何图片都可以通过base6 ...

  9. 多代理切换 MultiProxy

    配置代理选项 添加代理列表 ie配置代理 开始使用

  10. MySQL Index--Change Buffer

    Change Buffer功能 当执行INSERT/DELETE/UPDATE三类DML操作需要修改二级索引上数据时,如果需要修改的二级索引页未存在于当前Buffer Pool中,可以先将该" ...