使用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方法 ...
随机推荐
- Python之路【第三十一篇】:django ajax
Ajax 文件夹为Ajaxdemo 向服务器发送请求的途径: 1.浏览器地址栏,默认get请求: 2.form表单: get请求 post请求 3.a标签,超链接(get请求) 4.Ajax请求 特点 ...
- asp.net core 3.1 中Synchronous operations are disallowed. Call FlushAsync or set AllowSynchronousIO to true instead
在Action中解决措施: var syncIOFeature = HttpContext.Features.Get<IHttpBodyControlFeature>(); if (syn ...
- (转)Python_如何把Python脚本导出为exe程序
原文地址:https://www.cnblogs.com/robinunix/p/8426832.html 一.pyinstaller简介 Python是一个脚本语言,被解释器解释执行.它的发布方式: ...
- Java自学-操作符 三元操作符
Java的三元操作符 三元操作符 ?: 示例 1 : 三元操作符 语法:表达式?值1:值2 如果表达式为真 返回值1 如果表达式为假 返回值2 public class HelloWorld { pu ...
- python全栈学习路线
python全栈学习路线-查询笔记 查询目录 一,硬件 十一,数据 ...
- angular http interceptors 拦截器使用分享
拦截器 在开始创建拦截器之前,一定要了解 $q和延期承诺api 出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务 ...
- nginx-ingress之server-snippet用法
apiVersion: extensions/v1beta1 kind: Ingress metadata: annotations: nginx.ingress.kubernetes.io/serv ...
- Leetcode刷题python
Two Sum 两数==target 方法二更好 题1,对时间复杂度有要求O(n),所以维护一个字典,遍历过的数值放在字典中,直接遍历时候查找字典中有没有出现差,查找字典时间复杂度是O(1),所以O( ...
- 在eclipse下给android应用添加jar包
右键工程,Build path,java build path,选择libraries在右边的按钮中点击“Add Library”选择“User library”,点击“下一步”点击“User lib ...
- POSIX多线程
全文共分四部分: POSIX多线程—概述 POSIX多线程—异步编程举例 POSIX多线程—线程基本概念 POSIX多线程—互斥量概述 POSIX多线程—概述 Content 1. ...