<!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名称)
以上也是闲来无事写的，仅供参考，如果有不懂的可以在下方留言，如果多人需要帮助的话我再另外开一片文章专门讲。