【JavaScritp】cookies详解

最新推荐文章于 2021-12-16 17:32:17 发布

Monarch_lin

最新推荐文章于 2021-12-16 17:32:17 发布

阅读量856

点赞数 1

分类专栏： JavaScript 文章标签： cookies

本文链接：https://blog.csdn.net/Monarch_lin/article/details/40540263

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

什么是cookie？

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

cookie操作

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();
		}
	};

完整html：

<!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>

demo下载：

编码和解码
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---document.cookie