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 ...
随机推荐
- Echarts世界地图和网页表格数据交互联动
html布局: 1 <div class="column"> 2 <div class="panel bl bar1"> 3 <d ...
- #LCA，二分，树上差分#洛谷 2680 运输计划
题目 一棵树,每条边上都有边权,现在选择一条边将边权变为0,使\(m\)条路径边权和其中一条的最大值最小,问这个值 分析 由于大于最终结果的一定可行,小于最终结果的一定不可行,所以二分答案,首先答案以 ...
- 网站优化之开启tomcat的gzip压缩传输特性
本文于2015年底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 基于tomcat 8.0.x版本的文档,可以了解到tomcat支持基于g ...
- 【直播回顾】OpenHarmony知识赋能第八期：手把手教你实现涂鸦小游戏
OpenHarmony第八期知识赋能直播已经在9月29日圆满落幕!从9月15日起,资深OS框架开发工程师巴延兴老师于每周四进行分享,通过实现涂鸦小游戏来帮助大家全面了解ArkUI框架的应用,拓宽知识 ...
- C# Lock的用法
当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是说当对同一个资源进行读写的时候,我们要使该资源 ...
- 【FAQ】接入华为帐号服务过程中常见问题总结
华为帐号服务(Account Kit)为开发者提供简单.安全的登录授权功能,用户不必输入帐号.密码和繁琐验证,就可以通过华为帐号快速登录应用,即刻使用App.这篇文章收集了开发者们集成华为帐号服务中会 ...
- ODBC批量merge中出现主键冲突的分析
ODBC 批量 merge 中出现主键冲突的分析 一. 文档概括 客户某个 merge 语句运行时,发生主键冲突报错. 经分析,其原因如下: 由于 merge 语句中,ON 里的判断条件(谓词)中存在 ...
- How to install Django-Install Python Django | Django 安装指南【官方版】
How to install Django¶ This document will get you up and running with Django. Install Python--Linux ...
- UE4下实现HTC Vive手柄拾取物品蓝图编程
UE4下实现Vive手柄拾取物品 标签: UE4Vive游戏引擎 目录(?) [-] 创建拾取接口 实现接口 定义拾取 简单说下思路,首先定义拾取接口,然后在需要拾取的物品的蓝图类中实现该接口,最后在 ...
- redis 简单整理——内存的优化[二十七]
前言 简单介绍一下内存的优化. 正文 Redis所有的数据都在内存中,而内存又是非常宝贵的资源.如何优化内存的使用一直是Redis用户非常关注的问题.本节深入到Redis细节中,探索内存优化的技巧. ...