<!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. js中常见的字符串方法(3)

    match() match()方法只接受一个参数,要么是一个正则表达式,要么是一个 RegExp 对象. 调用这个方法本质上与调用RegExp的exec()方法相同, var text = " ...

  2. rancher部署kubernets集群

    docker的安装 先添加docker源 sudo apt update sudo apt install docker.io docker更换国内镜像 1.配置脚本如下: #!/bin/bashca ...

  3. SonarQube执行代码分析时,报错ERROR: Unable to create symbol table for : /**/*.java java.lang.IllegalArgumentException: Unsupported class file major version 55

    若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11686633.html 起因: 最近正在尝试SonarQube的简单使用,但是当 ...

  4. Go操作ini文件

    除了采用json,yaml等格式之外,常用的配置文件还有ini格式的. cfg, err := ini.Load(fyPath + "\\ServerSystem.ini") // ...

  5. python 递归\for循环_斐波那契数列

    # 递归 def myAdd(a, b): c = a + b print(c) if c > 100: return return myAdd(a + 1, c) #最大递归深度是1000 m ...

  6. 创建包含CRUD操作的Web API接口5:实现Delete方法

    本节是前面四节的延续,在前面几节中我们创建了Web API并添加了必要的基础设施,实现了Get.Post.和Put方法.本节中,我们将介绍如何在Web API中实现Delete方法. 在RESTful ...

  7. 记录个超级Update语句

    -- UPDATE UPDATE affair_list SET deleteState = WHERE gid IN ( SELECT tt.gid FROM ( SELECT a.gid FROM ...

  8. 在虚拟机Linux安装Redis

    在虚拟机上安装 CentOS 7 安装成功后登录Root用户进入 opt目录,下载Redis. 下载Redis 下载命令: wget http://download.redis.io/releases ...

  9. C# vb .net实现缩放特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的缩放特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  10. rabbitmq监控之消息确认ack

    rabbitmq springboot ack 监控 一.测试环境 二.启动测试 一直以来,学习rabbitmq都是跟着各种各样的教程.博客.视频和文档,撸起袖子就是干!!!最后,也成功了. 当然,成 ...