<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用户名:<input type="text" name="user" id="user">
年龄:<input type="text" name="age" id="age">
<input type="button" name="" value="提交" id="btn">
</body>
</html>
JS代码
<script type="text/javascript">
// 设置cookie
function setCookie(){
// 获取当前时间
var date = new Date();
// 支持传一个json {name:value}
var a = arguments;
if(a.length==2){
// 设置过期时间 = 当前时间 + 过期时间;
date.setDate(date.getDate()+a[1]);
for(k in a[0]){
document.cookie = k +"="+ encodeURI(a[0][k]) +";expires=" + date.toGMTString()+";path=/";
}
}else{
date.setDate(date.getDate()+a[2]);
// 设置cookie = 值=value encodeURI(把值进行编码) expires设置过期时间 path设置网站目录访问cookie权限,/表示当前域名下的所有目录都可以访问这个cookie
document.cookie = a[0] +"="+ encodeURI(a[1]) +";expires=" + date.toGMTString()+";path=/";
}
}
// 读取cookie
function readCookie(name){
// 获取cookie decodeURI把cookie进行解码
var cookie = decodeURI(document.cookie);
// 获取当前名称的起始索引
var start = cookie.indexOf(name+'=');
// 如果找不到这个名称的话就直接返回;
if(start==-1)return '';
// 获取结束索引,start表示开始查找的起点
var end = cookie.indexOf(';',start);
// 如果返回-1说明是最后一条数据
if(end==-1){
// 最后一条直接截取到末尾
return cookie.substring(start+name.length+1);
}
// 如果不是末尾的话截取到;
return cookie.substring(start+name.length+1,end);
}
// 删除cookie
function removeCookie(name){
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
}
// 写入cookie
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var user = document.getElementById('user').value;
var age = document.getElementById('age').value;
// 设置cookie
setCookie({
'user':user,
'age':age
},10);
};
// 打印cookie
console.log(readCookie('user'));
</script>
使用方法:
设置cookie:setCookie()支持传递2个或3个参数 json&&time || nam&&value&&time json:{name:value},time:多久过期
读取cookie:readCookie(要读取的cookie名称)
删除cookie:removeCookie(要删除的cookie名称)
以上也是闲来无事写的,仅供参考,如果有不懂的可以在下方留言,如果多人需要帮助的话我再另外开一片文章专门讲。