1.什么是cookie
cookie是一种会话跟踪技术。
它是客户端使用的一种技术 服务端使用的会话跟踪技术是session。
2.cookie 的作用：
将网页中的数据保存到浏览器当中
3.cookie的生命周期
默认生命周期是一次会话，浏览器关闭之后数据就会被清除
4.如何设置cookie的生命周期
通过express设置过期时间，并且过期时间没有过期，那么下次打开浏览器数据还是存在。 如果已经过期了，那么会立即删除保存的数据。
var date = new Date(); date.setDate(date.getDate()+1); // 将生命周期设为明天 document.cookie = "age = 33;express="+date.toGMTString()+";";
5.cookie注意点
5.1 cookie默认不会保存任何的数据
// 保存数据的方式 document.cookie = "age = 33;";
5.2 cookie不能一次性设置多条数据，想要保存多条数据，只能一条一条的设置
document.cookie="name=dxw,age=18;"; // 该设置方法是错误的 document.cookie="name = dxw;"; document.cookie="age = 18;"; // 只能分条设置
5.3 cookie保存数据有大小和个数的限制
个数限制：20~50 大小限制：4KB左右
6.cookie作用范围
6.1 路径问题
同一个浏览器的同一个路径下访问（同一个文件夹）
如何在上一级路径中也能访问？需要添加以下代码： path=/
document.cookie="name = dxw;path=/;";
6.2 域名问题
例：假设我们在www.123.com下面保存了一个cookie，那么我们在www.123.com中是无法访问的。
如果想在www.123.com中也能访问，那么我们需要再添加一句代码domain=123.com。
document.cookie="name = dxw;path=/;doamin=123.com"; // 这是保存cookie的完整形式
7.cookie封装
7.1 获取方法封装
// 这是没有封装cookie的情况： <script> window.onload=function (ev) { document.cookie = "age = 18;"; } </script> // 无封装
这是没有封装的情况：
// Cookie封装函数： <script> window.onload=function (ev) { // document.cookie = "age = 18;"; // 调用Cookie封装函数 addCookie("name","dxw","1","/","127.0.1"); function addCookie(key, value, day, path, domain){ // 1.处理默认保存的路径 var index = window.location.pathname.lastIndexOf("/") var currentPath = window.location.pathname.slice(0, index); path = path || currentPath; // 2.处理默认保存的domain domain = domain || document.domain; // 3.处理默认的过期时间 if(!day){ document.cookie = key+"="+value+";path="+path+";domain="+domain+";"; }else{ var date = new Date(); date.setDate(date.getDate() + 1); document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";"; } } } </script>
封装cookie函数成功，我们可以看到这里的路径，过期时间，Domain已被修改！
8.封装进阶———Cookie获取和删除方法封装
- 首先获取cookie：
console.log(document.cookie);可以看到cookie被打印到控制台了。
2. 如何取出每一条cookie？
这里可以用";"分割 var res = document.cookie.split(";")然后打印到控制台console.log(res);我们看看效果。
得到一个数组，那么接下来只需要遍历这个数组拿到每一条cookie。
var res= document.cookie.split(";"); for(var i = 0; i < res.length; i++){ console.log(res[i]); }
3.如何拿到key？
var res= document.cookie.split(";"); for(var i = 0; i < res.length; i++){ var temp = res[i].split("="); if(temp[0] === "age") { console.log(temp[1]); } }
通过上面方法获取到了指定cookie的值。
接下来封装cookie获取方法
function getCookie(key){ // console.log(document.cookie); var res= document.cookie.split(";"); // console.log(res); for(var i = 0; i < res.length; i++){ // console.log(res[i]); var temp =res[i].split("="); if(temp[0].trim() === key){ return temp[1]; } } }
7.2 删除方法封装
function delCookie(key, path) { addCookie(key, getCookie(key), -1, path); } // 调用以下此方法就ok啦 delCookie("name", "/");
