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="data: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的更多相关文章

  1. 运用JS设置cookie、读取cookie、删除cookie

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种 ...

  2. JS设置cookie、读取cookie、删除cookie

    JS设置cookie.读取cookie.删除cookie       JS设置cookie,注意一定要path=/ ,根目录,不然其他目录可能查询不到..默认是本目录. document.cookie ...

  3. JS设置cookie，删除cookie

    js设置cookie有很多种方法. 第一种:(这个是w3c官网的代码) <script> //设置cookie function setCookie(cname, cvalue, exda ...

  4. js设置cookie过期及清除浏览器对应名称的cookie

    js设置cookie过期也就相当于清除浏览器对应名称的cookie的例子. 代码: function ClearCookie() {  var expires = new Date();  expir ...

  5. JS设置Cookie,及COOKIE的限制

    在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值.每个cookie除了 name ...

  6. JS设置cookie、读取cookie、删除cookie（转载）

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie.假设有这样一种情 ...

  7. js设置cookie(原生js)

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

  8. 运用JS设置cookie、读取cookie、删除cookiev

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

  9. JS设置cookie，删除cookie(引)

    JS设置cookie,删除cookie(引) js设置cookie有很多种方法. 第一种:(这个是w3c官网的代码) <script> //设置cookie function setCoo ...

随机推荐

  1. 字符串格式化命令 sprintf

    原型 int sprintf( char *buffer, const char *format, [ argument] … ); 参数列表 buffer:char型指针,指向将要写入的字符串的缓冲 ...

  2. 表单的enctype property

    enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www-form-urlencoded".就是说,在 ...

  3. include文件时尽量使用绝对路径

    1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row['id'] 的速度是$row[id]的7倍. 3.echo 比 print 快,并且使用ech ...

  4. 内省操作javabean的属性

    import java.beans.BeanInfo; import java.beans.IntrospectionException; import java.beans.Introspector ...

  5. Python脚本模拟登录网页之ZiMuZu篇

    ZiMuZu.tv这个网站喜欢看电影看美剧的人一定都熟悉. 这个网站原先的升级策略是每天登陆网站, 然后去一个"每日签到"的页面点击一个签到按钮, 以实现帐号等级的升级. 之前网上 ...

  6. 【iCore3 双核心板】例程二十六：MODBUS TCP实验——电源监控

    实验指导书及代码包下载: http://pan.baidu.com/s/1pKhxKd9 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  7. redis 自启动

    第一步: 在/etc/init.d/目录下建立一个名字为 redis 的启动脚本 cd /etc/init.d touch redis 然后在这个脚本中添加如下脚本  <注意修改自己的PIDFI ...

  8. 探索.git目录

    .git目录 下面就开始进入.git目录,通过“ls”命令可以看到.git目录中的文件和子目录: 对于这些文件和目录,下面给出了一些基本的描述. hooks:这个目录存放一些shell脚本,可以设置特 ...

  9. [转]倍数提高工作效率的 Android Studio 奇技

    转自:http://android.jobbole.com/81687/ 倍数提高工作效率的 Android Studio 奇技 2015/10/08 · 技术分享 · 4 评论· Android S ...

  10. java求素数和求一个数的一个正整数的质因数

    1.题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少对? (1)程序分析:不难发现兔子的规律是:1,1 ...