JS设置cookie

cookie 与 session 是网页开发中常用的信息存储方式。Cookie是在客户端开辟的一块可存储用户信息的地方;Session是在服务器内存中开辟的一块存储用户信息的地方.

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。

而cookie是运行在客户端的,所以可以用JS来设置cookie. 

首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:
 
假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为:

document.cookie="name="+username;  

JS读取cookie:
 
假设cookie中存储的内容为:name=jack;password=123
 
则在B页面中获取变量username的值的JS代码如下:

var username=document.cookie.split(";")[0].split("=")[1];  

//JS操作cookies方法!

//写cookies

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

    
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return (arr[2]);
    else
        return null;
}

//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));

//如果需要设定自定义过期时间
//那么把上面的setCookie 函数换成下面两个函数就ok;


//程序代码
function setCookie(name,value,time)
{
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getsec(str)
{
   alert(str);
   var str1=str.substring(1,str.length)*1;
   var str2=str.substring(0,1);
   if (str2=="s")
   {
        return str1*1000;
   }
   else if (str2=="h")
   {
       return str1*60*60*1000;
   }
   else if (str2=="d")
   {
       return str1*24*60*60*1000;
   }
}
//这是有设定过期时间的使用示例:
//s20是代表20秒
//h是指小时,如12小时则是:h12
//d是天数,30天则:d30

setCookie("name","hayden","s20");

实例一:

 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>follow mouse</title> 
<meta name="Author" content="hongru.chen"> 

<style type="text/css"> 

 

</style> 
 
</head> 
 
<body> 
  

<div id="overlay" style="display:none;">  

<div style="background:#000;filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4;width:100%;height:100%; position:fixed; _position:absolute;left:0px;top:0px; z-index:999998;"></div>      <div class="screenAdPop">           <p class="screenAdPopnarrow"><a href="http://www.bagtree.com/goods-18222.html" target="_blank">
              <img class="lazyload" src="http://www.bagtree.com/data/afficheimg/20140624jpmpmp.jpg" original="http://www.bagtree.com/data/afficheimg/20140624jpmpmp.jpg" width="285" height="390" border="0" style="display: inline;">
           </a>
</p>

        <span class="screenAdClose"></span>     

 </div> </div>

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
     
        //遮罩层
        var tipOverlay = $(‘#overlay‘);
       
        if (tipOverlay.length> 0) {
         //显示
   var _cookie = document.cookie;
   if(document.getCookie(‘bagtree_overlay‘)==‘close‘)
            {
             $(‘#overlay‘).css(‘display‘ , ‘none‘);
            }
            else
            {
             $(‘#overlay‘).css(‘display‘ , ‘block‘);
            }
   $("span.screenAdClose", tipOverlay).click(function () { $("#floatad-winpop").stop().animate({height:"216px"},1000);
   saveUserCookie();
    });
         window.setTimeout(function () { tipOverlay.fadeOut();$("#floatad-winpop").stop().animate({height:"216px"},1000);}, 5000);
   
        }
  var tipwinpop=$("#floatad-winpop");
  if(tipwinpop.length >0)
  {
  $("span.floatad-close",tipwinpop).click(function(){ $("#floatad-winpop").stop().animate({height:"0px"},1000); })
  }
   //签到信息
          sign_in_info();
  
    });
function saveUserCookie()
{
 var date = new Date();
 date.setTime(date.getTime() + 1*24*3600*1000);
 document.setCookie(‘bagtree_overlay‘,‘close‘,date.toGMTString());
 $(‘#overlay‘).fadeOut();
}
  //签到信息
function sign_in_info()
{
 
 var res=Ajax.call(window.location.href, ‘act=sign_in_info‘,null, ‘POST‘, ‘JSON‘,false); 
 if(res.error){
  
  alert(res.msg);
 }
 else
 {
  if(res.is_login==1)
  {
  $(‘#sign_user_name‘).text(res.user_name);
  $(‘#sign_in_num‘).text(res.sign_in_num);
  }
 
 }
 
}
 
</script>

</body> 
</html> 

 上面的例子是当弹窗的广告图点击关闭之后,cookie会记录到,然后一天之内再返回到这个页面的时候,这个弹窗就不会弹出来了,这个效果保证用户不用每次刷新页面的时候都要弹一次,这样用户体验也是非常好一点!

 实例二:

 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>follow mouse</title> 
<meta name="Author" content="hongru.chen"> 
<style type="text/css"> 
</style> 
</head> 
 
<body> 

<div class="favorite_index" style="height: 32px;width: 100%; position: relative; z-index: 1; display: none;">
<div class="wrapper">
<p class="clearfix" style="text-align:center;position:relative;border-top:1px solid #f0de96;border-bottom:1px solid #f0de96;background-color:#ffffe4;height:30px;">
<span style="display:block;float:left;padding:8px 0 0 500px;">按<span style="color:#ed1c24;">Ctrl + D</span>,把包包树批发网<a href="javascript:;" class="favorite_btn" style="color:#ed1c24; font-weight: bold; padding: 0pt 5px;">放入收藏夹</a>,以便下次访问更方便!</span><a href="javascript:;" class="never_close_btn" style="display: block; float: left; padding: 8px 0pt 0pt 10px; text-decoration: underline;"><span style="color:#f60;">不再提示</span></a><a href="javascript:void(0)" class="close_btn" style="display: block; float: left; position: absolute; top: 8px; right: 8px;"><img src="images/spire_fa.gif" alt="关闭"></a>
</p>
</div>
</div>

<script type="text/javascript">

/* 收藏提示 */

//关闭
$(‘.close_btn‘).click(function(){
$(‘.favorite_index‘).css(‘display‘ , ‘none‘);
});

//收藏
$(‘.favorite_btn‘).click(function(){
var sTitle = document.title;
var sURL = location.href;

try
{
window.external.AddFavorite(sURL, sTitle);
}
catch(e)
{
try
{
window.sidebar.addPanel(sTitle, sURL, "");
}
catch (e)
{
alert("加入收藏失败,请使用Ctrl+D进行添加");
}
}

});

//不在提示
$(‘.never_close_btn‘).click(function(){
var date = new Date();
date.setTime(date.getTime() + 7*24*3600*1000);
document.cookie = "bagtree_index_favorite=close;expires=" + date.toGMTString() + " ;path=/";
$(‘.favorite_index‘).css(‘display‘ , ‘none‘);
});

//显示
var _cookie = document.cookie;
if( !(_cookie.indexOf(‘bagtree_index_favorite‘) > 0) )
{
$(‘.favorite_index‘).css(‘display‘ , ‘block‘);
}

/* 收藏提示结束 */

});


</script>

</body> 
</html> 

 上面实例说明当用户点击不在提示按钮时候,cookie会记录到,当再刷新页面的时候,这个内容就不再弹出了,直到一周之后这个才能弹出这个框,这个只要是叙述COOKIE的一些记录设置的问题;

JS设置cookie,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。