使用window.localStorage，window.localStorage记录点击次数
<!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记录点击次数的更多相关文章
- window.location.href问题，点击，跳转到首页
onClick="window.location.href='./';" 点击,跳转到首页. location.href=url Js中实现跳转 window.location.h ...
- localStorage点击次数存储
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教 ...
- window.parent != window 解决界面嵌套问题
页面在被嵌套的时,效果:,,如果用户点击“刷新”,该问题即可解决. 如果想通过代码解决的话,这个问题属于客户端的问题,不是服务器端的问题. 如果直接写:window.location.href = “ ...
- jquery/js记录点击事件，单击次数加一，双击清零
目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...
- window.parent ,window.top,window.self 详解及parent和opener的区别
window.parent ,window.top,window.self 详解 在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层fr ...
- 关于 window.parent, window.top, window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口,opener是用open方法打 ...
- jquery源码中的(function(window, undefined){})(window)【转】
(function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ...
- JS 关于(function( window, undefined ) {})(window)写法的理解
JS 关于(function( window, undefined ) {})(window)写法的理解 [网络整理] (function( window, undefined ) {})(windo ...
- Javascript 中的window.parent ,window.top,window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
随机推荐
- C++冒泡排序及优化
冒泡排序 1.经典冒泡排序 经典的冒泡排序为从左边开始依次判断排序,每次最终仅将一个数向后冒泡,而对于其他数的排序没有什么帮助:如果已经所有元素已经是有序的,依然执行循环. 2.优化冒泡排序 优化地方 ...
- shared_ptr 用法
引入 shared_ptr 是c++为了提高安全性而添加的智能指针,方便了内存管理. 特点 shared_ptr 是通过指针保持对象共享所有权的智能指针.多个 shared_ptr 对象可占有同一对象 ...
- 常用SQL指令
SQL去重复语句:select 改为Delete select * from TRWTC01 where ITEM_NAME in (select ITEM_NAME from TRWTC01 gro ...
- Django框架第七篇（模型层）--多表操作：一对多/多对多增删改，跨表查询（基于对象、基于双下划线跨表查询），聚合查询，分组查询，F查询与Q查询
一.多表操作 一对多字段的增删改(book表和publish表是一对多关系,publish_id字段) 增 create publish_id 传数字 (publish_id是数据库显示的字段名 ...
- Windows10下QT5.13.2安装mingw64/MYSQL8.0驱动
开始之前,先将编译器的路径添加到系统环境变量. 我的QT所以sql驱动是在下面这个目录中(大家在自己Qt的安装目录找到对应的文件夹就行,下面的路径也是如此), E:\qt\5.13.2\mingw73 ...
- expect——通过编写自动化脚本实现信息交互(整理)
本文简要介绍了expect工具语言的功能.用法,并以实例来具体说明 expect是什么 Expect是一个免费的编程工具语言,用来完成通信过程中的交互式任务,而无需人的干预. 通过shell虽然可以实 ...
- elasticsearch安全重启节点
elasticsearch集群,有时候可能需要修改配置,增加硬盘,扩展内存等操作,需要对节点进行维护升级.但是业务不能停,如果直接kill掉节点,可能导致数据丢失.而且集群会认为该节点挂掉了,就开始转 ...
- Jenkins基于https的k8s配置
一.摘要 jenkins 连接低版本的k8s时,不需要验证.但是新版本的启用了https和角色管理 二.安装kubernetes插件 登录jenkins,点击 Manage Jenkins --> ...
- WPF 判断一个对象是否是设计时的窗口类型，而不是运行时的窗口
原文:WPF 判断一个对象是否是设计时的窗口类型,而不是运行时的窗口 当我们对 Window 类型写一个附加属性的时候,在属性变更通知中我们需要判断依赖对象是否是一个窗口.但是,如果直接判断是否是 W ...
- C#基础—数组
C#基础之数组 1. 数组的定义与初始化 一维数组: (1) int [] A = new int[4]{ 0,1,2,3}; (2) int[] B ...