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 ...
随机推荐
- 面试题，关于int类型转byte类型结果溢出
1 package com.atguigu.chapter03 2 /* 3 byte:-128~127 4 128 : Int类型,占4个字节,32位 5 计算机中的整型数据都以补码的形式存储,正数 ...
- MySQL分组数据和子查询
分组数据 创建分组 mysql> SELECT vend_id,COUNT(*) AS num_prods FROM products GROUP BY vend_id; +---------+ ...
- #线段树#洛谷 4340 [SHOI2016]随机序列
题目 分析 可以发现加号和减号会抵消掉,真正有用的答案就是第一段的乘积. 那也就是 \(\sum_{i=1}^nS_i*2*3^{n-i-1}\),其中 \(S_i\) 表示 \(a_1\) 到 \( ...
- #线性基，差分，线段树#洛谷 5607 [Ynoi2013] 无力回天 NOI2017
题目 分析 考虑区间修改比较难操作,将数组差分一下,转化成两次单点修改. 这样查询前缀的异或值就是该位置的异或值,线性基可以用线段树维护, 那么取出 \((l,r]\) 所在的线性基,再将 \(a[l ...
- Python分组数据并保存到单独的文件中
当处理大型数据集时,通常需要将数据分组,并将每个分组的数据保存到单独的文件中.下面是一个使用 Python 中的 pandas 库来实现这一目标的示例代码. 步骤 1: 导入所需的库 import o ...
- 修复HTTP动词篡改导致的认证旁路问题的方法
本文于2016年4月完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 诡异的问题 分析AppScan扫描报告的时候,发现报告里提示" ...
- Spring Boot 嵌入式服务器、Hibernate 关系和 Spring Data 全解析
嵌入式服务器 Spring Boot 的嵌入式服务器功能是一项方便而强大的功能,它允许你在应用程序中直接运行 Web 服务器,无需将其部署到单独的独立 Web 服务器中.这使得开发.测试和部署 Web ...
- html-testRunner中文乱码
如下图,使用 html-testRunner 这个库生成测试报告后,出现乱码 因为 HTML文件已经写了 文件编码是 utf-8 所以 我怀疑可能是 html-testRunner 这个库文件中 ...
- npm发包教程
1-npm注册账号 访问npm官网注册账号,邮件验证激活账号 npm官网 2-项目npm配置 在项目下打开终端,初始化npm npm init -y 此时项目下会生成package.json 配置文件 ...
- Windows XP Vmware 无法自适应窗口
之前在吾爱破解上找到一个 WindowsXP SP3 的精简系统(目前找不到在哪了),自带 VMtools 和 52 破解工具包,很适合 XP 系统下的逆向和病毒分析.目前准备学习一下<恶意代码 ...