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 ...
随机推荐
- Java实现栈
package algorithm; import java.util.Arrays; import java.util.Iterator; /** @author Administrator @da ...
- Scala 元祖Tuple
1 package chapter07 2 3 object Test10_Tuple { 4 def main(args: Array[String]): Unit = { 5 // 1. 创建元组 ...
- 4 HTML表格标签
4 表格标签 表格标签也是一种复合标签.由:table,tr,td,th,thead,tbody组合,由行和列组合成,行和列交叉的地方就是单元格.在HTML中使用table来定义表格.网页的表格和办公 ...
- #线段树、构造#A 或位运算
题目 一个长度为\(n\)的非负整数序列, 需要满足\(m\)个区间或值为阈值的限制条件 现在要构造一个这样的序列,不存在输出No 分析 线段树支持区间与,但查询区间或,下传标记,那就很好做了 代码 ...
- Mysql Order 排序的时候占用很长时间解决思路
MySQL中的连表查询(JOIN)在进行ORDER BY排序时可能会变得很慢,尤其是当处理大量数据时.以下是一些优化策略,可以帮助减少排序操作的时间: 索引优化: 确保参与排序的列上有索引.如果排序的 ...
- 我把分布式音乐播放器适配了Stage模型
OpenAtom OpenHarmony(以下简称"OpenHarmony")应用开发自API 8及其更早版本一直使用的是FA模型进行开发.FA模型是Feature Abilit ...
- C# 介绍、应用领域、入门、语法、输出和注释详解
什么是 C#? C#(发音为"C-Sharp")是一种由 Microsoft 创建的面向对象的编程语言,运行在 .NET Framework 上.源于 C 家族,与流行的语言如 C ...
- Docker学习路线10：容器安全
容器安全是实施和管理像Docker这样的容器技术的关键方面.它包括一组实践.工具和技术,旨在保护容器化应用程序及其运行的基础架构.在本节中,我们将讨论一些关键的容器安全考虑因素.最佳实践和建议. 容器 ...
- MogDB/openGauss 开机自启动
MogDB/openGauss 开机自启动 在 centos7.6 操作系统上设置 MogDB/openGauss 开机自启动,我们先来了解一下自定义服务的配置文件组成部分,共分为[Unit].[Se ...
- 重新点亮linux 命令树————网络配置的查看[十一三]
前言 简单整理一下网络配置. 正文 通过ifconfig 查看. 这个就是ip地址. 网卡mac地址. 还有一块信息非常重要: 这个io开头的信息,这里面就是我们127.0.0.1的信息. 那么就来演 ...