HTML笔记03------cookie
新浪布局
初始布局代码:
div.header+(div.container>(div.left+div.right))+div.footer
.header{height:;background:;}
JavaScript焦点事件
docment.focus();
JS事件冒泡机制:当一个元素接收到事件的时候,会把它接收到的所有传播给它的父级,一直到顶层Window.事件。
阻止冒泡 :当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
cookie :存储数据
当用户访问了某个网站(网页)的时候,就可以通过cookie来向访问者电脑上存储数据
1.不同浏览器存放的cookie位置不一样,也是不能通用的
2.cookie的存储是以域名的形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小
写法: document.cookie = "名字=值 ";expires=' +字符串格式的时
间';
日期时间转换为字符串-----》oDate.toGMTString();
通过document.cookie来获取网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie,他会把所有的cookie通过一个分号+空格的形式串联起来
cookie默认是临时存储,到浏览器关闭时,自动销毁
内容最好编码存放,encodeURI decodeURI
编码:encodeURI("");
解码:decodeURI();
如果长时间存放一个cookie,要同时设置一个过期时间
写法: expires =' '
设置: var oDate = new Date();
oDate.setDate(oDate.getDate +5);//5天之后被销毁
document.cookie = '名字=值;expires=" +oDate"';
封装------->设置cookie----》setCookie();
function setCookie(key,value, t) {
var oDate = new oDate();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '='+ value +';expires =' + oDate.toGMTString();
}
setCookie('sex','男',10);
// 设置cookie sex=男, 10天后销毁
移除cookie----------> removeCookie('cookie名');
封装-------->获取任意cookie值----》getCookie();
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i =0,len = arr1.length;i<len;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
alert(getCookie('名字'));
cookie 应用
网站访问登录时,记住用户名和密码
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<!--声明当前页面的编码集:charset=gdk,gb2312(中文编码),utf-8国际编码-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="Keywords" content="关键词,关键词"/>
<meta name="Description" content="描述"/>
<meta name="Author" content="天心阁主">
<title>JS练习---cookie</title>
<style>
</style>
<script>
window.onload = function () {
var oUser = document.getElementById('username'),
oPwd = document.getElementById('password'),
oLogin = document.getElementById('login'),
oDel = document.getElementById('del');
/**
* 登录事件
* 1.点击登录button时,alert('登录成功!');
* 2.获取cookie
* */
//判断cookie是否存储
if ( getCookie('username') ) {
oUsername.value = getCookie('username');
}
oLogin.onclick = function () {
alert('登录成功!');
setCookie('username',oUser.value,10)
oDel.onclick = function() {
removeCookie('username');
oUser.value = '';
}
//设置用户cookie
function setCookie(key,value, t) {
var oDate = new oDate();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '='+ value +';expires =' + oDate.toGMTString();
}
//获取用户登录的cookie
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i =0,len = arr1.length;i<len;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
alert(getCookie('名字'));
}
}
function removeCookie(key) {
setCookie(key, '', -1);
}
</script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
</head>
<body>
<div id="wrap">
用户:<input type="text" id="username">
密码:<input type="password" id="password">
<button id="login">登录</button>
<button id="del" style="background: chartreuse">去除</button>
</div>
</body>
</html>
最新文章
- mysqldump数据库同步遇到的问题
- 扒一扒自从买了kindle后看的书
- jquery循环操作
- 提供VR定制开发、AR定制开发(VR游戏定制、应用定制)
- Sharif University CTF 2016 -- Login to System (PWN 200)
- [Android]官网《Testing Support Library》中文翻译
- 如何使用Sitemap和menu创建网站导航
- CSS对浏览器的兼容性(IE和Firefox)技巧整理
- PHP文件操作 之统计目录大小
- Java &; XML Tool Overview
- Elasticsearch template(待续...)
- id 自增------删除数据后恢复到删除前自增id
- EffectiveC#02--仅在对基类进行强制更新时才使用new修饰符
- hdu 2614
- 一个Python小白5个小时爬虫经历 【续】
- Linux磁盘 - fdisk,partprobe, mkfs, mke2fs, fsck, badblocks, mount, mknod
- 关于《common-net》的ftp上传
- java获取一年的周数和间隔天数
- mysql存储emoji问题
- scrapy 中间件
热门文章
- WOW.js 和 animate.css 使用
- 17.3.16---python内建函数
- 使用node 做静态文件服务器
- day11-random模块-随机
- Wanna go back home
- 进程异常行为-反弹Shell攻击,KILL多个进程
- VBE2014_Setup_20160709.rar
- iOS商品详情、ffmpeg播放器、指示器集锦、自定义圆弧菜单、实用工具等源码
- 奇点云数据中台技术汇(五)| CDP,线下零售顾客运营中台
- Promise的用法(js&;java)