JS对Cookie的应用--JavaScript实例集锦（初学）
一个网站上的cookie信息可以实现下次自动登录，记录你的历史等等
可以在火狐浏览器查看本地代码的cookie信息：
打开火狐浏览器--点击右键--查看页面信息--安全--查看cookie
<!DOCTYPE html>
<html>
<head>
<title>Cookie</title>
</head>
<script type="text/javascript">
/* var oDate=new Date();
oDate.setDate(oDate.getDate()+30);
document.cookie="user=blue;expires=";
// document.cookie="pass=123";*/
//alert(document.cookie);
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';
}
function removeCookie(name){
setCookie(name,'1',-1);
}
alert(getCookie('username'));
// removeCookie('username');
// alert(getCookie('username'));
setCookie('username','abc',30);
setCookie('password','123456',300);
</script>
<body> </body>
</html>
2.利用cookie记录鼠标拖动div的位置坐标
<!DOCTYPE html>
<html>
<head>
<title>drag Div</title>
<style type="text/css">
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script type="text/javascript">
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';
}
function removeCookie(name){
setCookie(name,'1',-1);
}
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
var x=getCookie('x');
var y=getCookie('y');
if(x){
oDiv.style.left=x+'px';
oDiv.style.top=y+'px';
} oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if (l<0)
{l=0;}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if (t<0)
{t=0;}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
l=document.documentElement.clientHeight-oDiv.offsetHeight;
} oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
setCookie('x',oDiv.offsetLeft,5);
setCookie('y',oDiv.offsetTop,5);
}
}; return false; };
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
3.利用cookie记住用户名
<!DOCTYPE html>
<html>
<head>
<title>Remember Username</title>
<script type="text/javascript">
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';
}
function removeCookie(name){
setCookie(name,'1',-1);
}
window.onload=function(){
var oForm=document.getElementById('form1');
var oUser=document.getElementsByTagName('user')[0];
var oBtnClear=document.getElementsByTagName('a')[0];
oForm.onsubmit=function(){
setCookie('user',oUser.value,30);
};
oUser.value=getCookie('user');
alert(oUser.value);
oBtnClear.onclick=function(){
removeCookie('user');
oUser.value='';
}
}
</script>
</head>
<body>
<form id="form1" action="https://www.baidu.com">
Username:<input type="text" name="user" />
<br/>
<br/>
Password:<input type="password" name="pass"/><br/>
<input type="submit" value="Login"/><br/>
<a href="javascript:;">Forgot your username</a>
</form>
</body>
</html>
JS对Cookie的应用--JavaScript实例集锦（初学）的更多相关文章
- JS封装cookie操作函数实例(设置、读取、删除)
本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
- js获取cookie中存储的值
最近看了试卷题目发现自己会的十分的匮乏, 第一题就把自己难住了,知道有这个东西,但是实际上没有操作过. ========================================= cookie ...
- JS设置cookie
cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方. JavaScrip ...
- JS操作cookie以及本地存储（sessionStorage 和 localStorage ）
JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...
- JS使用cookie实现DIV提示框只显示一次的方法
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...
- 两种方法使用js读写cookie实现一个底部广告浮层效果
下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...
- 易懂 易上手的cookie 最简单明了 js中cookie的使用方法及教程
今天项目中需要用到cookie 看到我的cookie不行了 大喊一声我曹 怎么可以这样 我就疯狂的在网上找 找啊 找 但是我感觉都太官方了 废话不说 看栗子 1.引入jQuery与jQuery.C ...
- 通过js对cookie的使用手册
一般大多数人还是用引用JQuary API——jquery.cookie.js,来操作cookie.这是一种很不错的方式,我也支持这样的做法. 但是有时候我们只需要一种极为轻量级的代码来实现简单的功能 ...
- 运用JS设置cookie、读取cookie、删除cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种 ...
- JavaScript实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
随机推荐
- C++ atomic
atomic 每个 std::atomic 模板的实例化和全特化定义一个原子类型.若一个线程写入原子对象,同时另一线程从它读取,则行为良好定义. 另外,对原子对象的访问可以建立线程间同步,并按 std ...
- ET介绍——单线程异步
单线程异步 前面几个例子都是多线程实现的异步,但是异步显然不仅仅是多线程的.我们在之前的例子中使用了Sleep来实现时间的等待,每一个计时器都需要使用一个线程,会导致线程切换频繁,这个实现效率很低,平 ...
- #树形dp#B 预算缩减
题目 给定一棵树,你需要删去一些边(可以不删),使得剩下的图中每个点所在的连通块大小都\(\geq k\). 求删边的方案数,对\(786433\)取模.两种方案不同,当且仅当存在一条边在一个方案中被 ...
- SQL DELETE 语句：删除表中记录的语法和示例，以及 SQL SELECT TOP、LIMIT、FETCH FIRST 或 ROWNUM 子句的使用
SQL DELETE 语句 SQL DELETE 语句用于删除表中的现有记录. DELETE 语法 DELETE FROM 表名 WHERE 条件; 注意:在删除表中的记录时要小心!请注意DELETE ...
- HarmonyOS语言基础类库开发指南上线啦！
语言基础类库提供哪些功能?多线程并发如何实现?TaskPool(任务池)和Worker在实现和使用场景上有何不同? 针对开发者关注的并发等语言基础类库的相关能力,我们在新推出的语言基础类库开发指南 ...
- 基于ArkUI开发框架，图片马赛克处理的实现
原文:https://mp.weixin.qq.com/s/60HDKcBFV7GTjZpzeHtjeg,点击链接查看更多技术内容. 关于马赛克 马赛克是一种使用较为广泛的图片处理方式, ...
- 抓包整理外篇——————https 抓包 [ 五]
前言 简单介绍一下https 抓包. 正文 可能有人一开始的时候发现抓包都抓不到,原因也很简单,那是因为https 需要解密. 那么为什么https 不解密呢? 那是因为证书信任问题. 下面先介绍,上 ...
- js es6 模板字符
前言 es的模板字符,也就是定义了块的概念. 模板字符的二个条件: 1.必须在``中,这个`不是单引号而是反单引号,是tab的上面一个. 2.在#{}中,这个就有点意思了,里面不像后台的块级,在这里不 ...
- Django3.0连接数据库注意点
需先在应用下的__Init__.py文件中配置 import pymysqlpymysql.version_info=(1, 3, 13, 'final', 0) # 3.0时需要pymysql.in ...
- 高云1N1开发板高云gowin软件使用教程
国产FPGA是最近几年起来的产品,具有性价比高特点.高云FPGA,很多用户都用在LED,电机控制,PLC设备上. 开发板子采用GW1N-LV1QN48C6/I5 FPGA器件.具有低功耗,瞬时启动,高 ...