有关cookie
cookie 会话跟踪技术
<script>
/*
cookie 全称 会话跟踪技术。
会话：你在访问这个网站期间叫做会话。
cookie：将需要记录的信息以一个很小的磁盘文件(浏览器)进行存储。（最大只能存储2kb）
语法： name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
cookie的使用：
【注】由一堆键值对组成，其中每一个cookie中 name 和 value必须有的，但是后面带中括号的是可选的。
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
如果我们把cookie 的name和value写成中文例如 document.cookie = '名字=朱东凯'
这样就会在个别浏览器造成乱码，所以为了避免这种情况的方法，我们统一把字符编码去储存，然后再解码去读取
设置cookie的时候编码去存储
encodeURIComponent 中文 -> 字符
获取cookie的时候解码去读取
decodeURIComponent 字符 -> 中文
*/
//设置cookie
// document.cookie = "username=tian";
// document.cookie = encodeURIComponent("赛亚人") + "=" + encodeURIComponent("孙悟空");
//获取cookie
// alert(decodeURIComponent(document.cookie));
</script>
/*
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
expires 过期日期
如果不设置：默认是会话，当你浏览器完全关闭的时候，cookie过期了。cookie过期，系统就会自动清除cookie。
设置：
expires=日期对象
*/
代码示例：
document.cookie = "username=tian;expires=" + numOfDate(7); //获取n天后的日期 function numOfDate(n){ var d = new Date(); var day = d.getDate(); d.setDate(day + n); return d; } // alert(numOfDate(30)); window.onload = function(){ var oBtn = document.getElementById('btn1'); //点击按钮时清空cookie oBtn.onclick = function(){ //通过这种特质，完成cookie的删除。 document.cookie = "username=tian;expires=" + numOfDate(-1);//字符串拼接 numOfDate(-1)表示昨天 } } </script> </head> <body> <button id = 'btn1'>按钮</button> </body>
/*
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
path 限制访问路径
【注意】这里是路径，不包含http和https（这是协议）
如果不去设置，默认是我们访问.html文件的时候的路径
【注】设置cookie路径和获取cookie必须一致才能访问成功，否则访问失败。
*/
代码示例：
// document.cookie = 'username=金刚狼;path=' + '/cookie/demo/'; alert(document.cookie);
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
domain 限制访问域名
【注意】ip（192.168.1.1）是域名,www.baidu.com也是域名
如果不设置，默认是当前加载该文件的域名/IP
如果你设置的域名/IP 和 加载文件的域名/IP不一致，cookie设置都是失败
// document.cookie = 'username=tian;domain=' + "10.30.151.166";
secure 安全设置
如果不写该属性，默认是false，默认任何协议都能设置成功。
如果设置该属性，如果想cookie设置成功，你必须要通过https协议访问。
【注】只有被认证（通过工信部备案的）的网站才能使用https 所以说，secure就是指定这样的网站才能创建访问cookie。
所以说想通过造假域名、路径的等访问被人网站的cookie，你也得是经过备案的，这样就大大提高了安全性。
https 安全
http 不安全
*/
// document.cookie = 'username=tian;domain=' + "10.30.151.166"; // document.cookie = 'username=tian;secure';
封装有关关于 cookie的函数
/*
设置cookie
setCookie()
通过name获取value
getCookie()
删除cookie
removeCookie()
设置cookie的时候编码去存储
encodeURIComponent 中文 -> 字符
获取cookie的时候解码去读取
decodeURIComponent 字符 -> 中文
*/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 /* 8 设置cookie 9 setCookie() 10 11 12 通过name获取value 13 getCookie() 14 15 16 删除cookie 17 removeCookie() 18 19 20 设置cookie的时候编码去存储 21 encodeURIComponent 中文 -> 字符 22 获取cookie的时候解码去读取 23 decodeURIComponent 字符 -> 中文 24 */ 25 26 /* 27 expires 直接传数字 28 7 代表7天后过期 29 30 */ 31 32 //添加(创建)cookie 33 /*---------------封装添加(创建)cookie的函数----------------*/ 34 function setCookie(name, value, expires, path, domain, secure){ 35 var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value); 36 if(expires){//查看是否传入参数expires，有直接字符串拼接 37 cookieStr += ";expires=" + numOfDate(expires); 38 } 39 if(path){//查看是否传入参数path，有直接字符串拼接 40 cookieStr += ";path=" + path; 41 } 42 if(domain){//查看是否传入参数domain，有直接字符串拼接 43 cookieStr += ";domain=" + domain; 44 } 45 if(secure){//查看是否传入参数secure，有直接字符串拼接 46 cookieStr += ";secure"; 47 } 48 //将字符串参数直接传给cookie 49 document.cookie = cookieStr; 50 } 51 52 //获取n天后的日期 函数getCookie()要用 53 function numOfDate(n){ 54 var d = new Date(); 55 var day = d.getDate(); 56 d.setDate(day + n); 57 return d; 58 } 59 /*---------------封装添加(创建)cookie的函数end----------------*/ 60 61 62 /* //添加cookie，用于测试函数getCookie() 63 setCookie("超级赛亚人", "孙悟空", 7); 64 setCookie('英雄', "钢铁侠", 30); 65 setCookie("变种人", "X教授", 100); 66 */ 67 68 // alert(decodeURIComponent(document.cookie)); 69 //超级赛亚人=孙悟空; 英雄=钢铁侠; 变种人=X教授 70 71 72 73 //获取cookie 74 //分析上面通过alert(decodeURIComponent(document.cookie)); 75 //超级赛亚人=孙悟空; 英雄=钢铁侠; 变种人=X教授 76 77 /*---------------封装获取cookie的函数----------------*/ 78 function getCookie(name){ 79 var cookieStr = decodeURIComponent(document.cookie); 80 //1、查找name是否存在 81 var start = cookieStr.indexOf(name); 82 if(start == -1){ 83 return null; 84 }else{ 85 //2、查找键值对 86 var end = cookieStr.indexOf(";", start); 87 if(end == -1){ 88 end = cookieStr.length; 89 } 90 } 91 92 var str = cookieStr.substring(start, end); 93 // alert(str); 94 var arr = str.split("="); 95 return arr[1]; 96 } 97 /*---------------封装获取cookie的函数end----------------*/ 98 99 //测试函数getCookie() 100 alert(getCookie("超级赛亚人"));//孙悟空 101 alert(getCookie("英雄"));//钢铁侠 102 alert(getCookie("变种人"));//X教授 103 104 105 //移除(某个)cookie 106 /*---------------封装移除cookie的函数end----------------*/ 107 108 function removeCookie(name){ 109 document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0); 110 //new Date() 它是日期对象，传入参数0代表格林威治时间1970年的0点，计算机正式问世的时间 111 } 112 /*---------------封装移除cookie的函数end----------------*/ 113 114 removeCookie("变种人"); //cookie里会删除这个 115 116 </script> 117 </head> 118 <body> 119 120 </body> 121 </html>
