AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js的cookie操作

2017-11-15 968
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
cookie.js:
 
//这个cookie的js代码借用的老外的，我加了中文注释--原文:http: //www.echoecho.com/jscookies02.htm 
///设置cookie 
function setCookie(NameOfCookie, value, expiredays) 
{ 
//@参数:三个变量用来设置新的cookie: 
//cookie的名称,存储的Cookie值, 
// 以及Cookie过期的时间. 
// 这几行是把天数转换为合法的日期 

var ExpireDate =  new Date (); 
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); 

// 下面这行是用来存储cookie的,只需简单的为"document.cookie"赋值即可. 
// 注意日期通过toGMTstring()函数被转换成了GMT时间。 

document.cookie = NameOfCookie +  "=" + escape(value) + 
  ((expiredays ==  null) ?  "" : "; expires=" + ExpireDate.toGMTString()); 
} 

///获取cookie值 
function getCookie(NameOfCookie) 
{ 

// 首先我们检查下cookie是否存在. 
// 如果不存在则document.cookie的长度为0 

if (document.cookie.length > 0) 
{ 

// 接着我们检查下cookie的名字是否存在于document.cookie 

// 因为不止一个cookie值存储,所以即使document.cookie的长度不为0也不能保证我们想要的名字的cookie存在 
//所以我们需要这一步看看是否有我们想要的cookie 
//如果begin的变量值得到的是-1那么说明不存在 

begin = document.cookie.indexOf(NameOfCookie+ "="); 
if (begin != -1)    
{ 

// 说明存在我们的cookie. 

begin += NameOfCookie.length+1; //cookie值的初始位置 
end = document.cookie.indexOf( ";", begin); //结束位置 
if (end == -1) end = document.cookie.length; //没有;则end为字符串结束位置 
return unescape(document.cookie.substring(begin, end)); } 
} 

return  null; 

// cookie不存在返回null 
} 

///删除cookie 
function delCookie (NameOfCookie) 
{ 
// 该函数检查下cookie是否设置，如果设置了则将过期时间调到过去的时间; 
//剩下就交给操作系统适当时间清理cookie啦 

if (getCookie(NameOfCookie)) { 
document.cookie = NameOfCookie +  "=" + 
"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
} 
}
 
演示文件cookie.html:
 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"  /> 
< title >Cookie </title> 
< style  type ="text/css" > 
#welcome h3 
{ 
font-weight:normal; 
color:#800; 
} 
</style> 
< script  type ="text/javascript"  src ="cookie.js" > </script> 
< script  type ="text/javascript" > 

//---------------使用cookie---------------------- 
function useCookie() 
{ 
var username=getCookie("username"); 
if(username!=null){ 
document.getElementById('welcome').innerHTML=" < h3 >欢迎您,"+username+" </h3>"+" < button  onclick ='delusr();' >删除用户名 </button>"; 
}else{ 
var str=" < h3 >欢迎您,游客! </h3>"+ 
  " < input  id ='usrname'  type ='text'  />"+ 
  " < button  id ='saveusr'  onclick ='checksave();' >保存用户名 </button>"; 
document.getElementById('welcome').innerHTML=str; 
} 
} 

function checksave() 
{ 
var el=document.getElementById('usrname'); 
if(el.value){ 
setCookie("username",el.value); 
location.reload();//刷新页面 
} 
else 
alert("输入框不能为空"); 
} 

function delusr() 
{ 
delCookie("username"); 
location.reload(); 
} 
</script> 
</head> 
< body  onload ="useCookie();" > 
< div  id ="welcome" > 
</div> 
</body> 
</html> 
 
 
截图:
 



cookie.js:
 
//这个cookie的js代码借用的老外的，我加了中文注释--原文:http: //www.echoecho.com/jscookies02.htm 
///设置cookie 
function setCookie(NameOfCookie, value, expiredays) 
{ 
//@参数:三个变量用来设置新的cookie: 
//cookie的名称,存储的Cookie值, 
// 以及Cookie过期的时间. 
// 这几行是把天数转换为合法的日期 

var ExpireDate =  new Date (); 
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); 

// 下面这行是用来存储cookie的,只需简单的为"document.cookie"赋值即可. 
// 注意日期通过toGMTstring()函数被转换成了GMT时间。 

document.cookie = NameOfCookie +  "=" + escape(value) + 
  ((expiredays ==  null) ?  "" : "; expires=" + ExpireDate.toGMTString()); 
} 

///获取cookie值 
function getCookie(NameOfCookie) 
{ 

// 首先我们检查下cookie是否存在. 
// 如果不存在则document.cookie的长度为0 

if (document.cookie.length > 0) 
{ 

// 接着我们检查下cookie的名字是否存在于document.cookie 

// 因为不止一个cookie值存储,所以即使document.cookie的长度不为0也不能保证我们想要的名字的cookie存在 
//所以我们需要这一步看看是否有我们想要的cookie 
//如果begin的变量值得到的是-1那么说明不存在 

begin = document.cookie.indexOf(NameOfCookie+ "="); 
if (begin != -1)    
{ 

// 说明存在我们的cookie. 

begin += NameOfCookie.length+1; //cookie值的初始位置 
end = document.cookie.indexOf( ";", begin); //结束位置 
if (end == -1) end = document.cookie.length; //没有;则end为字符串结束位置 
return unescape(document.cookie.substring(begin, end)); } 
} 

return  null; 

// cookie不存在返回null 
} 

///删除cookie 
function delCookie (NameOfCookie) 
{ 
// 该函数检查下cookie是否设置，如果设置了则将过期时间调到过去的时间; 
//剩下就交给操作系统适当时间清理cookie啦 

if (getCookie(NameOfCookie)) { 
document.cookie = NameOfCookie +  "=" + 
"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
} 
}
 
演示文件cookie.html:
 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"  /> 
< title >Cookie </title> 
< style  type ="text/css" > 
#welcome h3 
{ 
font-weight:normal; 
color:#800; 
} 
</style> 
< script  type ="text/javascript"  src ="cookie.js" > </script> 
< script  type ="text/javascript" > 

//---------------使用cookie---------------------- 
function useCookie() 
{ 
var username=getCookie("username"); 
if(username!=null){ 
document.getElementById('welcome').innerHTML=" < h3 >欢迎您,"+username+" </h3>"+" < button  onclick ='delusr();' >删除用户名 </button>"; 
}else{ 
var str=" < h3 >欢迎您,游客! </h3>"+ 
  " < input  id ='usrname'  type ='text'  />"+ 
  " < button  id ='saveusr'  onclick ='checksave();' >保存用户名 </button>"; 
document.getElementById('welcome').innerHTML=str; 
} 
} 

function checksave() 
{ 
var el=document.getElementById('usrname'); 
if(el.value){ 
setCookie("username",el.value); 
location.reload();//刷新页面 
} 
else 
alert("输入框不能为空"); 
} 

function delusr() 
{ 
delCookie("username"); 
location.reload(); 
} 
</script> 
</head> 
< body  onload ="useCookie();" > 
< div  id ="welcome" > 
</div> 
</body> 
</html> 
 
 
截图:
 






本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/104996 ，如需转载请自行联系原作者





文章标签：
JavaScript
存储
前端开发
关键词：
JavaScript cookie
JavaScript操作
cookie操作
cookie js
js cookie
技术小胖子
目录
相关文章
cqtianxin1
|
26天前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
cqtianxin1
13 0
土木林森
|
3月前
|
存储 前端开发 JavaScript
揭秘！JavaScript本地存储的四大绝技：从Cookie到IndexedDB，让你的Web应用秒变数据存储高手，轻松应对各种挑战！
【8月更文挑战第4天】JavaScript为核心前端技术，提供多样本地存储方案以优化用户体验与减少服务器负载。首先，Cookie虽用于基本数据如登录状态，但受大小限制及安全性影响。接着，Web Storage中的LocalStorage持久存储不变数据，SessionStorage则限于单次会话。更进一步，IndexedDB作为全面数据库解决方案，支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
土木林森
56 9
zrblue
|
4月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（三）
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（三）
zrblue
40 1
朝阳39
|
4月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
朝阳39
43 1
朝阳39
|
4月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie（含Cookie的起源，属性，个数和大小限制，作用，优点，缺点，JS 的操作方法等）
浏览器【详解】Cookie（含Cookie的起源，属性，个数和大小限制，作用，优点，缺点，JS 的操作方法等）
朝阳39
184 0
zrblue
|
4月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（一）
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（一）
zrblue
30 0
zrblue
|
4月前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（二）
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（二）
zrblue
33 0
朝阳39
|
4月前
|
JavaScript 前端开发
js/javascript 操作对象【全】(含常用的操作对象的lodash)
js/javascript 操作对象【全】(含常用的操作对象的lodash)
朝阳39
32 0
朝阳39
|
4月前
|
存储 JavaScript 前端开发
js/javascript 操作数组【全】(含常用的操作数组的lodash)
js/javascript 操作数组【全】(含常用的操作数组的lodash)
朝阳39
23 0
朝阳39
|
4月前
|
存储 Web App开发 移动开发
js【详解】本地存储 Cookie、sessionStorage、localStorage
js【详解】本地存储 Cookie、sessionStorage、localStorage
朝阳39
129 0