码迷,mamicode.com
首页 > 其他好文 > 详细

cookie 二:

时间:2016-11-11 00:23:17      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:hang   rem   开始   path   打开   splay   zha   remove   size   

本篇随笔从cookie的入门开始,介绍了cookie的设置获取和移除,还有一些小的应用案例:

一、设置cookie
<script>
//设置cookie:
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie=name+‘=‘+value+‘;path=/;expires=‘+oDate;
}else{
document.cookie=name+‘=‘+value+‘;path=/;‘;
}
}
setCookie(‘zhangsan‘,‘100‘,3);
setCookie(‘lisi‘,‘200‘);

</script>

二、获取cookie:
<script>
//设置cookie:
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie=name+‘=‘+value+‘;path=/;expires=‘+oDate;
}else{
document.cookie=name+‘=‘+value+‘;path=/;‘;
}
}
setCookie(‘zhangsan‘,‘100‘,3);
setCookie(‘lisi‘,‘200‘);
function getCookie(name){
var arr = document.cookie.split(‘; ‘);
for(var i =0 ;i < arr.length; i++){
var tmp = arr[i].split(‘=‘);
if(name == tmp[0]){
return tmp[1];
}
}
return ‘‘;
}
alert(getCookie(‘lisi‘));
</script>

三、移除cookie:
<script>
//name:cookie名字,value:cookie 值; iDay: 过期时间
//setCookie(name,value,iDay);
function setCookie(name,value,iDay){
if(iDay){
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name+‘=‘+value+‘;path=/;expires=‘ + oDate;
}else{
document.cookie = name+‘=‘+value+‘;path=/‘;
}
}

setCookie(‘zhangsan‘,‘100‘,3);
setCookie(‘lisi‘,‘200‘);

//getCookie(name);
//a=1; abc=123
function getCookie(name){
var arr = document.cookie.split(‘; ‘);
for(var i =0 ;i < arr.length; i++){
var tmp = arr[i].split(‘=‘);
if(name == tmp[0]){
return tmp[1];
}
}
return ‘‘;
}

//removeCookie(name);
function removeCookie(name){
setCookie(name,‘as‘,-1);
}

removeCookie(‘lisi‘);

</script>

四、小案例:
1.选项卡中,离开页面时停留在一模块,再次打开时,还是那个模块。
<style>
#box {
width: 400px;
height: 300px;
border: #000 1px solid;
margin: 100px auto;
}

#box a {
display: block;
float:left;
width: 100px;
height: 39px;
text-align:center;
line-height: 39px;
background:#ccc;
color: #333;
text-decoration:none;
border-bottom: #333 1px solid;
}

#box a.active{
background: #c00;
color: #fff;
width: 98px;
border-left: #333 1px solid;
border-right: #333 1px solid;
}

#box div{
width: 400px;
height: 260px;
text-align:center;
line-height:260px;
font-size:50px;
display:none;
}
</style>
<script>
function setCookie(name,value,iDay){
if(iDay){
var oDate = new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie = name+‘=‘+value+‘;path=/;expires=‘+oDate;
}else{
document.cookie=name+‘=‘+value+‘;path=/‘;
}
}

function getCookie(name){
var arr = document.cookie.split(‘; ‘);
for(var i = 0; i < arr.length; i++){
var tmp = arr[i].split(‘=‘);
if(name == tmp[0]){
return tmp[1];
}
}
return ‘‘;
}
window.onload = function(){
var oBox = document.getElementById(‘box‘);
var aBtn = oBox.getElementsByTagName(‘a‘);
var aDiv = oBox.getElementsByTagName(‘div‘);
//var index = 0;

var index = getCookie(‘tabIndex‘);
if(index){
tab();
}
function tab(){
for(var i = 0; i < aBtn.length; i++){
aBtn[i].className = ‘‘;
aDiv[i].style.display = ‘none‘;
}
this.className = ‘active‘;
aDiv[index].style.display = ‘block‘;
}

for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
index = this.index;
tab();
setCookie(‘tabIndex‘,this.index,10);
}
}
}
</script>
 
 
 

cookie 二:

标签:hang   rem   开始   path   打开   splay   zha   remove   size   

原文地址:http://www.cnblogs.com/beyrl-blog/p/6052479.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!