一、定义
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时,他的名字可以记录在 cookie 中。
在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储,如下所示:
name=fyovo
二、完整代码示例
下面这段代码为完整的HTML页面示例
您可以将它复制到本地运行 看下实际效果
代码中的注释写的很明白,这里就不做过多的文字说明了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="setCookie('fyovo','test cookie value 666',2)">设置cookie</button> <button onclick="p.innerHTML = getCookie('fyovo')">查询cookie</button> <button onclick="delCookie('fyovo')">删除cookie</button> <p id="p"></p> </body> <script> var p = document.getElementById('p'); //1.设置cookie //三个参数分别为cookie名, cookie值, 过期时间(单位:毫秒) function setCookie(name, value, expire){ var cookieString = name + '=' + escape(value) + ';path=/';//escape()函数对字符串进行编码 //判断是否设置过期时间 if (expire > 0) { var date = new Date(); date.setTime(date.getTime() + expire*3600*100); cookieString += ';expires=' + date.toGMTString(); } document.cookie = cookieString; } //2.查询cookie //一个参数:cookie名 function getCookie(name){ var cookieString = document.cookie; var cookieArray = cookieString.split(';');//split()函数的作用是将cookie字符串以';'分号为标志,分割成数组 //循环遍历出我们要查找的cookie名 for (var i = 0; i < cookieArray.length; i++) { var arr = cookieArray[i].split('='); if (arr[0] == name) { //返回解码后的值 return unescape(arr[1]);//unescape()函数对字符串进行解码 } return null; } } //3.删除cookie //一个参数:cookie名 function delCookie(name){ //删除cookie的原理非常简单,只需将cookie的过期时间设置在当前时间以前的任意时间即可 var date = 'Thu, 01 Jan 1970 00:00:00 GMT'; var cookieValue = getCookie(name); if (cookieValue != null) { document.cookie = name + '=' + cookieValue + ';path=/;expires=' + date; } } </script> </html>