首页 > 代码库 > [JavaScript]cookie 详解
[JavaScript]cookie 详解
什么是cookie？
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
cookie操作
1 var cookies = { 2 //读取cookie:字符串截取方法 3 getCookieByStr:function (c_name){ 4 if (document.cookie.length>0){ 5 c_start=document.cookie.indexOf(c_name + "=");//检测是否存在对于的键值 6 if(c_start!=-1){ 7 c_start=c_start + c_name.length+1; //返回等号后面一个字符索引，及对应字符开始位置 8 c_end=document.cookie.indexOf(";",c_start);//从c_start位置开始搜索字符";"，返回字符的位置索引 9 if (c_end==-1) {c_end=document.cookie.length;}//如果找不到字符";"，即只有一个cookie值 10 return unescape(document.cookie.substring(c_start,c_end)); //通过前后位置截取对于的cookie值，并解码 11 } 12 } 13 return ""; //不存在则返回空 14 }, 15 //设置cookie--名称/值/过期天数 16 setCookie:function(c_name,value,expiredays){ 17 var exdate=new Date(); 18 exdate.setDate(exdate.getDate()+expiredays);//设置日期 19 document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); 20 }, 21 //删除cookie 22 delCookie:function(c_name){ 23 var exdate = new Date(); 24 exdate.setDate(exdate.getDate()-1);//昨天日期 25 document.cookie = c_name+"=;expires="+exdate.toGMTString(); 26 } 27 };
完整DEMO：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Cookies</title> </head> <body> <label for="key">cokie:<input type="text" name="key" id="cookieStr"></label> <input type="button" id="add" value = "添加cookie" > <input type="button" id="del" value = "删除cookie" > <script type="text/javascript"> var cookies = { //读取cookie:字符串截取方法 getCookieByStr:function (c_name){ if (document.cookie.length>0){ c_start=document.cookie.indexOf(c_name + "=");//检测是否存在对于的键值 if(c_start!=-1){ c_start=c_start + c_name.length+1; //返回等号后面一个字符索引，及对应字符开始位置 c_end=document.cookie.indexOf(";",c_start);//从c_start位置开始搜索字符";"，返回字符的位置索引 if (c_end==-1) {c_end=document.cookie.length;}//如果找不到字符";"，即只有一个cookie值 return unescape(document.cookie.substring(c_start,c_end)); //通过前后位置截取对于的cookie值，并解码 } } return ""; //不存在则返回空 }, //设置cookie--名称/值/过期天数 setCookie:function(c_name,value,expiredays){ var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays);//设置日期 document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }, //删除cookie delCookie:function(c_name){ var exdate = new Date(); exdate.setDate(exdate.getDate()-1);//昨天日期 document.cookie = c_name+"=;expires="+exdate.toGMTString(); } }; window.onload = function(){ document.getElementById(‘add‘).onclick = function(){ var value = document.getElementById(‘cookieStr‘).value; if(value){ cookies.setCookie(‘cookie‘,value,10); } document.getElementById(‘cookieStr‘).value=""; alert(document.cookie); }; document.getElementById(‘del‘).onclick = function(){ cookies.delCookie(‘cookie‘); alert("cookie已删除：cookie="+document.cookie); } } </script> </body> </html>
编码和解码
escape() 函数
----可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
unescape()
---- 函数可对通过 escape() 编码的字符串进行解码。
扩展：
小型框架---完整cookies读写，完全支持Unicode
var docCookies = { getItem: function (sKey) { if (!sKey) { return null; } return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; }, setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } var sExpires = ""; if (vEnd) { switch (vEnd.constructor) { case Number: sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; break; case String: sExpires = "; expires=" + vEnd; break; case Date: sExpires = "; expires=" + vEnd.toUTCString(); break; } } document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); return true; }, removeItem: function (sKey, sPath, sDomain) { if (!this.hasItem(sKey)) { return false; } document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); return true; }, hasItem: function (sKey) { if (!sKey) { return false; } return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }, keys: function () { var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } return aKeys; } };
参考：
MDN：
https://developer.mozilla.org/en-US/docs/Web/API/document.cookie?redirectlocale=en-US&redirectslug=DOM%2Fdocument.cookie#Removing_a_cookie
[JavaScript]cookie 详解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。