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="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的更多相关文章
- 运用JS设置cookie、读取cookie、删除cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种 ...
- JS设置cookie、读取cookie、删除cookie
JS设置cookie.读取cookie.删除cookie JS设置cookie,注意一定要path=/ ,根目录,不然其他目录可能查询不到..默认是本目录. document.cookie ...
- JS设置cookie，删除cookie
js设置cookie有很多种方法. 第一种:(这个是w3c官网的代码) <script> //设置cookie function setCookie(cname, cvalue, exda ...
- js设置cookie过期及清除浏览器对应名称的cookie
js设置cookie过期也就相当于清除浏览器对应名称的cookie的例子. 代码: function ClearCookie() { var expires = new Date(); expir ...
- JS设置Cookie,及COOKIE的限制
在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值.每个cookie除了 name ...
- JS设置cookie、读取cookie、删除cookie（转载）
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie.假设有这样一种情 ...
- js设置cookie(原生js)
cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方. JavaScrip ...
- 运用JS设置cookie、读取cookie、删除cookiev
JS设置cookie: 假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为: document.cookie=&q ...
- JS设置cookie，删除cookie(引)
JS设置cookie,删除cookie(引) js设置cookie有很多种方法. 第一种:(这个是w3c官网的代码) <script> //设置cookie function setCoo ...
随机推荐
- mysql syntax bypass some WAF
select{x table_name}from{x information_schema.tables} mysql> select{x table_name}from{x informati ...
- CSS3初学篇章_4（边框样式/段落样式）
边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...
- lua的table排序
lua中利用到的排序的基本上就是构造函数(table)了,为了便于和C区分开来,我俗称它为表单. 实例:(原理就是LUA集成的冒泡算法) 排序的一般姿势(对于只包含数字或者只包含字符串的简单数组) t ...
- purge mysql自带命令清除binlog
#!/bin/bash DATAUSER=root DATAPASS=shiyiwen DAY=$1 if [ ! $# == 1 ];then echo -e "\033[32m USAG ...
- python关于列表转为字典的两个小方法
1.现在有两个列表,list1 = ['key1','key2','key3']和list2 = ['1','2','3'],把他们转为这样的字典:{'key1':'1','key2':'2','ke ...
- Android课程---Android ImageView的scaleType属性与adjustViewBounds属性（转）
ImageView的scaleType的属性有好几种,分别是matrix(默认).center.centerCrop.centerInside.fitCenter.fitEnd.fitStart.fi ...
- Java 内存区域划分
JVM的内存区域划分 学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆.栈以及静态数据区.那么在Java语言当中,内存又是如何划分的 ...
- HTML问题集锦及笔记
1.<html>和<body>之间的输出? 加入<p>or<script>均可正常运行 2.<br />换行,用<br>< ...
- redis 自启动
第一步: 在/etc/init.d/目录下建立一个名字为 redis 的启动脚本 cd /etc/init.d touch redis 然后在这个脚本中添加如下脚本 <注意修改自己的PIDFI ...
- 文件上传去除"Content-Disposition: form-data"
某个项目中为了统一处理文件上传业务,创建了一个FileUpload Handle,由于上传客户端用到各种技术,当时为了方便断点续传,就直接接收请求中的文件内容(可能是分片),所以处理的不是规范的htt ...