什么是cookie?
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
判断cookie是否存在的方法?
alert(typeof document.cookie); ? // string ?返回string 就是存在
如何设置cookie?
|
1 |
document.cookie = 'user=czj'; |
这样我们就设置（创建）了1个cookie，你也可以同时创建多个名字不同的cookie，如果名字相同，那么后面的cookie会把前面的cookie给覆盖掉,
PS：cookie的存储是存储在磁盘里的
设置cookie也有一个完整格式
|
1 |
document.cookie = 'user=值; expires=失效时间; path=路径访问;domain=域名访问; secure=安全的https' |
浏览器可以通过右键去查看页面信息 → 显示查看cookie，我用的是Chrome（谷歌）
如何获取cookie?
获取cookie也非常简单
|
1 |
alert(document.cookie); |
Cookie的编码
|
1 2 3 4 5 |
document.cookie = 'user=' + encodeURIComponent('陈泽江'); //?user=%E9%99%88%E6%B3%BD%E6%B1%9F ? ?编码后 alert(decodeURIComponent(document.cookie)); // user=陈泽江 解码后 |
PS：Cookie 编码 可以让cookie 更加安全
如何删除cookie？
1、cookie在会话结束（浏览器关闭）时，会删除cookie
2、手动去删除cookie，也就是去页面信息那
3、如果设置了时间，那么浏览器关闭后，打开还是存在，必须到达规定的时间才会自己删除
如：
|
1 2 3 |
var date = new Date(); date.setDate(date.getDate() + 7); // 让时间 加7天 document.cookie = 'user=' + encodeURIComponent('陈泽江') + ';expires=' + date; |
为了我们方便我们日常开发中使用，我们可以创建几个函数以供使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
// 设置cookie函数 // expires == 失效时间 // path == cookie存放路径 // domain == 域名 // secure == 安全加密链接 // 设置cookie function setCookie(name,value,expires,path,domian,secure) { var cookieName = encodeURIComponent(name) + '=' + encodeURIComponent(value); if(expires instanceof Date) // 对象类型 { cookieName += ';expires=' + expires; } if(path){ cookieName += ';path=' + path; } if(domian){ cookieName += ';domian='+ domian; } if(secure){ cookieName += ';secure'; } document.cookie = cookieName; } // 获取cookie function getCookie(name) { var cookieName = encodeURIComponent(name) + '='; // alert(cookieName); // user= var cookieStart = document.cookie.indexOf(cookieName); // indexOf 找到字符 第一次出现位置 // alert(cookieStart); // user = 0; url = 35; email = 55; var cookieValue = null; // 用来存放截取的cookie 字符串 if(cookieStart > -1) // indexOf 找不到返回 -1 ，所有要大于-1 才有值 { var cookieEnd = document.cookie.indexOf(';',cookieStart); //alert(cookieEnd); //user=32 , url = 53,email = 79 if(cookieEnd == -1) { cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd)); } return cookieValue; } //设置过期时间函数 function setCookieDate(day){ // 传递一个天数，比如传递7，就7天后失效 if(typeof day == 'number' && day > 0) { date = new Date(); //alert(date.getDate()); // 6号 date.setDate(date.getDate() + day); } else { throw new Error('传递的参数不合法，必须是数字且大于0') } return date; } //alert(setCookieDate(0)); setCookie('user','陈泽江',setCookieDate(7)); setCookie('url','chenzejiang.com',setCookieDate(7)); setCookie('email','820289461@qq.com',setCookieDate(7)); // 输出 所有cookie 就是这样个样子 alert(document.cookie); // user=%E9%99%88%E6%B3%BD%E6%B1%9F; url=chenzejiang.com; email=820289461%40qq.com; // 我们项目中一般只是要取某个cookie的值，那么我们就要用到上面的getCookie(); 函数 |
W3C的JavaScript Cookies页面?http://www.w3school.com.cn/js/js_cookies.asp
更多详细内容可以到这里观看
实例练习
创建一个欢迎 cookie
利用用户在提示框中输入的数据创建一个 JavaScript Cookie，当该用户再次访问该页面时，根据 cookie 中的信息发出欢迎信息。