热门搜索 :
教你做菜
您的当前位置:首页正文

JavaScript对Cookie操作的封装小结_javascript技巧

2023-12-02 来源:海亿美食网

Javascript 没有 private , public 访问权限设置的关键字,但是可以通过一定的技巧来模拟出相同的结果. 首先我们来看下面一行代码: var i = (1, 2, 3, 4, 5); 变量 i 最后的结果为 5. 这是逗号操作符的结果,也就是说返回最后的一个值,小括号改变了这行代码的优先级,否则 var i = 1, 2, 3, 4, 5; 会报错缺少标识符. var i = (1, 2, 3, 4, function(){ return 5 * 5;}); 变量 i 最后的结果为 一个函数, 返回结果 25. 这就是Javascript 的灵活之处,能够赋值任意类型而不必提前声明.现在我们完全可以进行如下调用: i(); alert( i() ); 来获得返回25的一次方法调用. 我们继续, 变量 i 是通过赋值符来获取函数的引用的, 也就是说在等号右边的小括号运算完后返回的最后一个结果的引用还在,虽然我们无法显示调用,但它确实存在,如果要不通过变量的引用而调用呢? (1, 2, 3, 4, function(){ alert(5 * 5);})() 上面的代码执行后,弹出一个消息框,显示25. 为了显示方便,我将上个例子的函数改为弹出消息框了. 两对小括号 () (); 前面一对表示返回一个结果,如果该结果为一个函数,由第二对小括号发生调用. 也就是通过前面一对括号发生匿名函数的引用,以便在下面进行引用.这就是对匿名函数的调用. 关于更多匿名函数的使用可以参考文尾的引用连接. 闭包产生的原因是因为作用域的不同,子作用域引用了父作用域的变量,而返回子作用域,父作用域按理来说执行完毕后该销毁掉了,只是子作用域一直存在,且一直握有父作用域的引用,所以才一直保留. 来看下面的代码 代码如下: function parent() { var a = 1; function child(){ var b = 2; alert(a); alert(b); } } 父函数 parent 中包含了一个 child 子函数,在子函数中有一个对父函数中 a 变量的引用(输出其值). 我们来让父函数执行完后返回其声明的子函数 代码如下: function parent() { var a = 1; function child(){ var b = 2; alert(a); alert(b); } return child; } var t = parent(); t(); 在10行中, 我们执行了parent 函数,返回了在函数内部声明的函数 child,这时变量 t 持有该返回对象(此时是一个可以执行的函数)的引用,在11行代码中我们调用了它.结果分别输出了 1 和 2. 注意,输出 2, 是因为我们在子函数体内声明了一个变量,而输出 1, 我们在该函数体内并没有相应的定义变量 a ,而是发生了对父函数里的变量的引用,也就是说引用了父作用域的变量. 而此时又能能够完成输出的,也就是说变量 a 还存在.可是我们无法直接对其引用 (比如 parent.a),因为函数已经执行完毕,没有了其相应的引用,我们只能通过所返回的子函数的引用来进行访问. 假如我又在父函数中声明了其他的变量呢? 结果是一样的,子函数能够访问,而如果子函数并不返回相应的引用的话,我们根本无法从外部访问到.这就形成了闭包. 闭包能够干些什么呢?如果你有一个不想让外部随意修改的变量该怎么做?那就去使用闭包. 代码如下: myObj = {}; //声明一个全局变量,它是一个window对象的属性(window.myObj) (function(){ var i = 4; myObj = { //引用全局变量,对其进行赋值 getI : function() { //get方法,一个函数 return i; }, setI : function(val) { //set方法,限制值的设定 if(val > 100) { alert("i connt > 100"); return; } i = val; } } })(); //匿名函数的调用,由于也是一个函数,所以作为一个子作用域,在执行完之后销毁,避免代码污染 myObj.setI(5); //成功 myObj.setI(101); //失败 alert(myObj.getI()); alert(myObj.i); //错误,没有该属性 至此我们简单的实现了public 访问权限以及 private 访问权限 (也就给你想给你的,不给你不想给你的) 在页面中,我们通常使用 document.cookie 属性来访问,对其赋新值就会创建一个新的Cookie,一个Cookie通常具有五个属性:value (存储的值), date (UTC格式的时间,代表什么时间过期, domain (域,Cookie的所有者), Path (子目录). 而在平常的开发中,如果仅仅使用 document.cookie 属性进行访问,会很麻烦,因为只能向其赋值字符串,并且在读取后还要进行字符串切割,才能获取指定变量名称的值.document.cookie 读取时,返回的是所有赋值的值,而不包括过期时间,域之类的信息,只能再次独设置. 下面就附上代码,全部封装到Cookie全局对象中,暴露出几个方法. Get : 放回指定所有cookie字符串. Set : 设置cookie 字符串. Clear : 清除所有cookie对象. GetDayTime : 获取指定距今val天的Date对象. Write : 写cookie.已重载.详见代码. Query : 查询cookie. 已重载.详见代码. Update : 修改cookie. Delete : 删除cookie. 代码1-7 代码如下: Cookie = {}; /* * Date对象的setTime方法是设置距离1970-01-01以来的毫秒数,设置到对象里去,返回的是据那以后的毫秒数而不是原对象. * 如果Cookie 不设置 expires 属性,或者expires 时间比本地时间少,那么将会在下一次浏览时过期. * document.cookie 对象返回的是所有值的字符串形式,不包含 expires 或者其他. * */ (function() { var nDay = 24 * 60 * 60 * 1000; var isString = function(v) { return typeof v === "string"; } var isArray = function(v) { return Object.prototype.toString.apply(v) == "[object Array]"; } var isObject = function(v) { return v && typeof v == "object"; } var isDate = function(v) { return Object.prototype.toString.apply(v) == "[object Date]"; } var getTime = function() { return new Date().getTime(); } var trim = function(val) { return (val || "").replace(/^s+|s+$/g, ""); } var tryEval = function(val) { var Obj, e; try { Obj = eval(val); } catch (e) { Obj = val; } return Obj; } var ObjectToString = function(o) { var tstr = "{"; for (var v in o) { if (isArray(o[v])) { tstr += v + ":" + ArrayToString(o[v]) + ","; } else if (isObject(o[v])) { tstr += v + ":" + ObjectToString(o[v]) + ","; } else if (isString(o[v])) { tstr += v + ":"" + o[v].toString() + "","; } else { tstr += v + ":" + o[v].toString() + ","; } } return tstr.slice(0, -1) + "}"; } var ArrayToString = function(o) { var tstr = "["; for (var v in o) { if (isArray(o[v])) { tstr += ArrayToString(o[v]) + ","; } else if (isObject(o[v])) { tstr += ObjectToString(o[v]) + ","; } else { tstr += o[v].toString() + ","; } } return tstr.slice(0, -1) + "]"; ; } Cookie = { Get: function() { return document.cookie; }, Set: function(val) { document.cookie = val; }, Clear: function() { var temp = this.Query(); var o; for (o in temp) { this.Delete(o); } }, GetDayTime: function(val) { var texpires = new Date(); texpires.setTime(texpires.getTime() + val * nDay); return texpires; }, Write: function() { /* * Cookie.Write(Object); 写入对象,名称为main; * Cookie.Write(varname, Object); varname:变量名, Object:写入对象; * Cookie.Write(Object, Date); Object:写入对象, Date:过期时间; * Cookie.Write(varname, Object, Date); varname:变量名, Object:写入对象, Date:过期时间; * Cookie.Write(varname, Object, Date, Domain, Path); varname:变量名, Object:写入对象, Date:过期时间, Domain:域, Path: 子目录; */ if (arguments.length == 1) { var tvalue = arguments[0]; var tstr = ""; var texpires = new Date(); texpires.setTime(texpires.getTime() + 1 * nDay); if (isArray(tvalue)) { tstr = ArrayToString(tvalue); } else if (isObject(tvalue)) { tstr = ObjectToString(tvalue); } else { tstr = tvalue.toString(); } tstr = "main=" + escape(tstr) + ";expires=" + texpires.toGMTString() + ";"; } else if (arguments.length == 2) { var tname, tvalue, texpires, tstr = ""; if (isDate(arguments[1])) { tname = "main"; tvalue = arguments[0]; texpires = arguments[1]; } else { tname = arguments[0]; tvalue = arguments[1]; texpires = new Date(); texpires.setTime(texpires.getTime() + 1 * nDay); } if (isArray(tvalue)) { tstr += ArrayToString(tvalue); } else if (isObject(tvalue)) { tstr += ObjectToString(tvalue); } else { tstr = tvalue.toString(); } tstr = tname + "=" + escape(tvalue) + ";expires=" + texpires.toGMTString() + ";"; } else if (arguments.length == 3) { var tname = arguments[0], tvalue = arguments[1], texpires = arguments[2], tstr = ""; if (isArray(tvalue)) { tstr = ArrayToString(tvalue); } else if (isObject(tvalue)) { tstr = ObjectToString(tvalue); } else { tstr = tvalue.toString(); } tstr = tname + "=" + escape(tvalue) + ";expires=" + texpires.toGMTString() + ";"; } else if (arguments.length == 5) { var tname = arguments[0], tvalue = arguments[1], texpires = arguments[2], tdomain = arguments[3], tpath = arguments[4], tstr = ""; if (isArray(tvalue)) { tstr = ArrayToString(tvalue); } else if (isObject(tvalue)) { tstr = ObjectToString(tvalue); } else { tstr = tvalue.toString(); } tstr = tname + "=" + escape(tvalue) + ";expires=" + texpires.toGMTString() + ";domain=" + tdomain + ";path=" + tpath + ";"; } alert(tstr); this.Set(tstr); }, Query: function() { /* * Cookie.Query(); 返回所有Cookie值组成的Object; * Cookie.Query(string); 返回指定名称的Object; 失败则返回 undefined; * Cookie.Query(string, Object); 为指定对象写入指定名称的Object,并返回; 失败则返回 undefined; */ var tname = tvalue = "", tright = -1; var tstr = this.Get(); var tObj = {}; if (arguments.length == 0) { var i = 0; do { tname = trim(tstr.slice(i, tstr.indexOf("=", i))); tright = tstr.indexOf(";", i); if (tright == -1) { tvalue = unescape(tstr.slice(tstr.indexOf("=", i) + 1, tstr.length)); } else { tvalue = unescape(tstr.slice(tstr.indexOf("=", i) + 1, tright)); } tObj[tname] = tryEval(tvalue); i = tstr.indexOf(";", i) == -1 ? -1 : tstr.indexOf(";", i) + 1; } while (i != -1); } else { tname = arguments[0]; if (tstr.indexOf(tname) == -1) return undefined; var i = tstr.indexOf(tname); tname = trim(tstr.slice(i, tstr.indexOf("=", i))); tright = tstr.indexOf(";", tstr.indexOf(tname)) == -1 ? tstr.length : tstr.indexOf(";", tstr.indexOf(tname)); tvalue = unescape(tstr.slice(tstr.indexOf(tname) + tname.length + 1, tright)); if (arguments.length == 1) { tObj = tryEval(tvalue); } else if (arguments.length == 2) { tObj = arguments[1]; tObj[tname] = tryEval(tvalue); } } return tObj; }, Update: function() { return this.Write.apply(this, arguments); }, Delete: function() { if (arguments.length == 1) { var varname = arguments[0]; if (this.Query(varname)) { this.Update(varname, "", new Date(1970, 01, 01)); } } } } 其中有一个从字符串eval 成对象的执行,以及从Object 或者 Array 对象获得对应字符串形式的功能函数,模拟了一些JSON的操作.当然,并不能存储所有的JavaScript 对象,仅仅满足一部分,我已经感觉够用了. 个人理解有限,请各位多多指教. Javascript的匿名函数 : http://dancewithnet.com/2008/05/07/javascript-anonymous-function/ Javascript的闭包 : http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2007/08/JavaScriptClosures.htmlCookie 文件的格式 : http://www.cnblogs.com/sephil/archive/2008/05/06/cookiefmt.html

小编还为您整理了以下内容,可能对您也有帮助:

JS 操作 cookies 的方法

在 JS(JavaScript) 操作cookies比较复杂,在 ASP 里面我们只需要知道 cookie 的名称、cookie 的值就行了,而 JS 里面,我们面对的是 cookie 的字符串,你自己编写这个字符串写入客户端,然后自己解析这个字符串。

一、从写 cookie 说起。

var the_date = new Date("December 31, 2020");

var expiresDate = the_date.toGMTString();

document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;

第一句是日期对象;

第二句将日期格式转换成 GMT 格式;编者者: GMT 即格林威治标准时间,现在也称 UTC 即全球标准时间。

第三句是将 cookie 内容写入客户端。

其中 expires 是系统使用的,表示 cookie 的失效日期(也可以省略),expires 不可读。

escape 是对 cookie 值进行编码,这是为了处理中文、空格等而设立的。

二、取 cookie 是比较简单的。

function GetCSS()

{

var cookieStr = document.cookie; //取 cookie 字符串,由于 expires 不可读,所以 expires 将不会出现在 cookieStr 中。

if (cookieStr == "")

{

return "main1"; //没有取到 cookie 字符串,返回默认值

}

var cookieValue = cookieStr.split("; "); //将各个 cookie 分隔开,并存为数组,多个 cookie 之间用分号加空隔隔开,不过前面我们只使用了一个 cookie,它的值与 expires 之间也是用分号加空格隔开的

var varName = "userDefineCSS";

var startPos = -1;

var endPos = -1;

for (var i=0; i<cookieValue.length; i++)

{

startPos = cookieValue[i].indexOf(varName);

if (startPos != 0)

{

continue; //当前 cookie 不是名称为 varName 的 cookie,判断下一个 cookie

}

startPos += varName.length + 1; //当前 cookie 就是名称为 varName 的 cookie,由于有等号,所以 +1

endPos = cookieValue[i].length;

var css = unescape(cookieValue[i].substring(startPos, endPos));

return css;

}

return "main1";

}

在JavaScript中如何实现读取和写入cookie


本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点,有这方面需要的朋友参考下吧。
首先先让我们简单地了解一下cookie.
在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cookie机制了。简单说来,cookie提供了一种便捷的方式,能够在用户的计算机上保存少量数据并且远程获得它们,从而让网站可以保存一些细节信息,比如用户的习惯设置或是上一次访问网站的时间。cookie本身是一些短小的信息,能够由页面保存在用户的计算机上,然后被其他页面读取。cookie一般都设置为在一定时间后失效。
当然,cookie也有局限之处:浏览器对于能够保存的cookie数量有所*,通常是几百个或者多一点。一般情况下,每个域名20个cookies是允许的,而每个域最多能保存4KB的cookie.除了大小*可能导致的问题,也有很多原因会引起硬盘上的cookie消失,比如达到有效期限了,或是用户清理了cookie信息,或是换用了其他浏览器。因此,cookie不适合用来保存重要数据,在编写代码时也要考虑到cookie获取异常的处理方法。
在JavaScript中,使用document对象的cookie属性来储存和获取cookie.通常,document.cookie里的信息是由成对的名称和值组成的字符串,每一对数据的形式是:
name=value;下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.
首先是createCookie.html,在该页面中会创建一个cookie,完整的代码如下:
<html>
<head>
<title>createCookie</title>
<script>
function createCookie(){
//get name and password
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
//create cookie
document.cookie = name+'|'+pwd;
//go to showCookie.html page
window.location.href = "showCookie.html";
}
</script>
</head>
<body>
Userame: <input id="name" type="text" /><br><br>
Password: <input id="pwd" type="password" /><br><br>
<button onclick="createCookie()">Submit</submit>
</body>
</html>该页面的截图如下:
点击submit按钮,就会创建一个cookie,在该cookie中保存了Username和Password信息,并且会跳转到showCookie.html页面。其中,showCookie.html页面的完整代码如下:
<html>
<head>
<title>showCookie</title>
<script>
function showCookie(){
//document.cookie is a string, using split() function to get cookie date in array form
var arr = document.cookie.split('|');
//processing data in cookie
var cookie_info = 'Data in cookie:<br>username is: '+arr[0]+"<br>password is: "+arr[1]+'<br>';
//set content of element of id "res"
document.getElementById("res").innerHTML = cookie_info;
}
</script>
</head>
<body>
<button onclick="showCookie()">Show Cookie</button>
<p id="res"></p>
</body>
</html>页面截图如下:
点击show Cookie按钮就会显示cookie里面的信息了。
下面,我们将会在本地和服务器上分别跑这个程序,分别在IE浏览器和Chrome浏览器上运行这个程序,看看cookie的运行情况。
首先我们在本地运行这个程序,我们将上述两个文件都放在E盘中。先在IE浏览器上运行,在createCookie.html页面上输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
cookie在本地环境中的IE浏览器中运行正常。
接下来,我们看看在Chrome浏览器中运行情况,首先在Chrome浏览器中打开createCookie.html页面,输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
同样的程序,这次cookie在Chrome浏览器中却运行失败了。
接着让我们在服务器中运行这个程序,需要用到xampp,并打开Apache服务器,将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下(具体的操作方法可以参考这篇博客:JavaScript之使用AJAX(适合初学者))。我们现在IE浏览器中运行该程序,在IE浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
然后我们在Chrome浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
这次在服务器环境下,IE浏览器和Chrome浏览器的cookie都运行正常!
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
如何看待vue中的深复制
在vue中scroller返回页面并且记住滚动位置如何实现
vue+springboot如何实现单点登录跨域问题(详细教程)

在JavaScript中如何实现读取和写入cookie


本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点,有这方面需要的朋友参考下吧。
首先先让我们简单地了解一下cookie.
在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cookie机制了。简单说来,cookie提供了一种便捷的方式,能够在用户的计算机上保存少量数据并且远程获得它们,从而让网站可以保存一些细节信息,比如用户的习惯设置或是上一次访问网站的时间。cookie本身是一些短小的信息,能够由页面保存在用户的计算机上,然后被其他页面读取。cookie一般都设置为在一定时间后失效。
当然,cookie也有局限之处:浏览器对于能够保存的cookie数量有所*,通常是几百个或者多一点。一般情况下,每个域名20个cookies是允许的,而每个域最多能保存4KB的cookie.除了大小*可能导致的问题,也有很多原因会引起硬盘上的cookie消失,比如达到有效期限了,或是用户清理了cookie信息,或是换用了其他浏览器。因此,cookie不适合用来保存重要数据,在编写代码时也要考虑到cookie获取异常的处理方法。
在JavaScript中,使用document对象的cookie属性来储存和获取cookie.通常,document.cookie里的信息是由成对的名称和值组成的字符串,每一对数据的形式是:
name=value;下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.
首先是createCookie.html,在该页面中会创建一个cookie,完整的代码如下:
<html>
<head>
<title>createCookie</title>
<script>
function createCookie(){
//get name and password
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
//create cookie
document.cookie = name+'|'+pwd;
//go to showCookie.html page
window.location.href = "showCookie.html";
}
</script>
</head>
<body>
Userame: <input id="name" type="text" /><br><br>
Password: <input id="pwd" type="password" /><br><br>
<button onclick="createCookie()">Submit</submit>
</body>
</html>该页面的截图如下:
点击submit按钮,就会创建一个cookie,在该cookie中保存了Username和Password信息,并且会跳转到showCookie.html页面。其中,showCookie.html页面的完整代码如下:
<html>
<head>
<title>showCookie</title>
<script>
function showCookie(){
//document.cookie is a string, using split() function to get cookie date in array form
var arr = document.cookie.split('|');
//processing data in cookie
var cookie_info = 'Data in cookie:<br>username is: '+arr[0]+"<br>password is: "+arr[1]+'<br>';
//set content of element of id "res"
document.getElementById("res").innerHTML = cookie_info;
}
</script>
</head>
<body>
<button onclick="showCookie()">Show Cookie</button>
<p id="res"></p>
</body>
</html>页面截图如下:
点击show Cookie按钮就会显示cookie里面的信息了。
下面,我们将会在本地和服务器上分别跑这个程序,分别在IE浏览器和Chrome浏览器上运行这个程序,看看cookie的运行情况。
首先我们在本地运行这个程序,我们将上述两个文件都放在E盘中。先在IE浏览器上运行,在createCookie.html页面上输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
cookie在本地环境中的IE浏览器中运行正常。
接下来,我们看看在Chrome浏览器中运行情况,首先在Chrome浏览器中打开createCookie.html页面,输入信息,并点击submit按钮,截图如下:
跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:
同样的程序,这次cookie在Chrome浏览器中却运行失败了。
接着让我们在服务器中运行这个程序,需要用到xampp,并打开Apache服务器,将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下(具体的操作方法可以参考这篇博客:JavaScript之使用AJAX(适合初学者))。我们现在IE浏览器中运行该程序,在IE浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
然后我们在Chrome浏览器中输入网址:http://localhost/createCookie...:
点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:
这次在服务器环境下,IE浏览器和Chrome浏览器的cookie都运行正常!
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
如何看待vue中的深复制
在vue中scroller返回页面并且记住滚动位置如何实现
vue+springboot如何实现单点登录跨域问题(详细教程)

JavaScript提供的Cookie属性有哪些


JavaScript提供的Cookie属性有:expires属性(声明Cookie的到期时间),max-age属性(声明Cookie活动的最大时间),domain属性(定义有效域名),path属性。
Cookie是什么?
Cookie是服务器端和客户端之间持续存在的大量信息,Web浏览器在浏览时会将这些信息存储下来。
Cookie通常采用以分号分隔的name-value对的形式来将信息作为字符串包含;它维护用户的状态并记住网页中的用户信息。
如何在JavaScript中创建Cookie?
在JavaScript中,我们可以使用document.cookie属性创建,读取,更新和删除cookie 。
创建cookie的基本语法:
document.cookie = “name = value” ;JavaScript的Cookie属性
JavaScript提供了一些可选属性来增强cookie的功能,我们来看看这些属性:
expires属性:
可以将cookie的状态保持到指定的日期和时间;也就是说,它声明了表示cookie活动期间的日期和时间,是创建持久cookie的方法之一。
例:设置“username = Gxl网”对的cookie的有效期到2030年,8月20日,12:00:00
document.cookie = “username = Gxl网; expires = Sun,20 Aug 2030 12:00:00 UTC” ;注:expires属性,一旦声明的时间是过去(任何过去的时间都可以),就会自动删除cookie;它也是删除cookie的一种方法。
例:设置有效期到1970年,1月1日,00:00:00

document.cookie = "username=Gxl网; expires= Thu, 01 Jan 1970 00:00:00 GMT";max-age属性
可以将cookie的状态保持到指定的时间,时间是以秒为单位计算的。它也是创建持久cookie的方法之一。
document.cookie = "username =Gxl网; max-age =" +(60 * 60 * 24 * 365)+";"注:使用max-age属性同样可以删除cookie,只需要向max-age属性提供零或负数(表示秒数)就可。
document.cookie = "name = Gxl网; max-age = 0" ;domain属性
它是用于指定cookie有效的域;使得cookie在指定域名中,才会有效。
假设我们为domain属性提供任何域名,例如:
domain = php .cn这里,cookie对给定域及其所有子域都有效。
但是,如果我们为属性提供任何子域,例如:
domain=img.php .cn这里,cookie仅对给定的子域有效。因此,给cookie提供域名而不是子域名来让cookie在指定域名下有效是一种更好的方法。
path属性:将cookie的范围扩展到网站的所有页面
JavaScript Cookie的简单示例
示例:JavaScript创建Cookie,获取Cookie,读取Cookie
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>效果图:
当输入名字,按“确定”按钮后,刷新当前页面,会出现:
总结:

JavaScript提供的Cookie属性有哪些


JavaScript提供的Cookie属性有:expires属性(声明Cookie的到期时间),max-age属性(声明Cookie活动的最大时间),domain属性(定义有效域名),path属性。
Cookie是什么?
Cookie是服务器端和客户端之间持续存在的大量信息,Web浏览器在浏览时会将这些信息存储下来。
Cookie通常采用以分号分隔的name-value对的形式来将信息作为字符串包含;它维护用户的状态并记住网页中的用户信息。
如何在JavaScript中创建Cookie?
在JavaScript中,我们可以使用document.cookie属性创建,读取,更新和删除cookie 。
创建cookie的基本语法:
document.cookie = “name = value” ;JavaScript的Cookie属性
JavaScript提供了一些可选属性来增强cookie的功能,我们来看看这些属性:
expires属性:
可以将cookie的状态保持到指定的日期和时间;也就是说,它声明了表示cookie活动期间的日期和时间,是创建持久cookie的方法之一。
例:设置“username = Gxl网”对的cookie的有效期到2030年,8月20日,12:00:00
document.cookie = “username = Gxl网; expires = Sun,20 Aug 2030 12:00:00 UTC” ;注:expires属性,一旦声明的时间是过去(任何过去的时间都可以),就会自动删除cookie;它也是删除cookie的一种方法。
例:设置有效期到1970年,1月1日,00:00:00

document.cookie = "username=Gxl网; expires= Thu, 01 Jan 1970 00:00:00 GMT";max-age属性
可以将cookie的状态保持到指定的时间,时间是以秒为单位计算的。它也是创建持久cookie的方法之一。
document.cookie = "username =Gxl网; max-age =" +(60 * 60 * 24 * 365)+";"注:使用max-age属性同样可以删除cookie,只需要向max-age属性提供零或负数(表示秒数)就可。
document.cookie = "name = Gxl网; max-age = 0" ;domain属性
它是用于指定cookie有效的域;使得cookie在指定域名中,才会有效。
假设我们为domain属性提供任何域名,例如:
domain = php .cn这里,cookie对给定域及其所有子域都有效。
但是,如果我们为属性提供任何子域,例如:
domain=img.php .cn这里,cookie仅对给定的子域有效。因此,给cookie提供域名而不是子域名来让cookie在指定域名下有效是一种更好的方法。
path属性:将cookie的范围扩展到网站的所有页面
JavaScript Cookie的简单示例
示例:JavaScript创建Cookie,获取Cookie,读取Cookie
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>效果图:
当输入名字,按“确定”按钮后,刷新当前页面,会出现:
总结:

cookie的JavaScript Cookies

创建和存储 cookie
在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到欢迎词。  首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数: functionsetCookie(c_name,value,expiredays){varexdate=newDate()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+=+escape(value)+((expiredays==null)?:;expires=+exdate.toGMTString())}上面这个函数中的参数存有 cookie 的名称、值以及过期天数。  在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。  之后,我们要创建另一个函数来检查是否已设置 cookie: functiongetCookie(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+1c_end=document.cookie.indexOf(;,c_start)if(c_end==-1)c_end=document.cookie.lengthreturnunescape(document.cookie.substring(c_start,c_end))}}return}上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。  最后,我们要创建一个函数,这个函数的作用是:如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。 functioncheckCookie(){username=getCookie('username')if(username!=null&&username!=){alert('Welcomeagain'+username+'!')}else{username=prompt('Pleaseenteryourname:',)if(username!=null&&username!=){setCookie('username',username,365)}}}这是所有的代码: <html><head><scripttype=text/javascript>functiongetCookie(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+1c_end=document.cookie.indexOf(;,c_start)if(c_end==-1)c_end=document.cookie.lengthreturnunescape(document.cookie.substring(c_start,c_end))}}return}functionsetCookie(c_name,value,expiredays){varexdate=newDate()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+=+escape(value)+((expiredays==null)?:;expires=+exdate.toGMTString())}functioncheckCookie(){username=getCookie('username')if(username!=null&&username!=){alert('Welcomeagain'+username+'!')}else{username=prompt('Pleaseenteryourname:',)if(username!=null&&username!=){setCookie('username',username,365)}}}</script></head><bodyonLoad=checkCookie()></body></html>

cookie的JavaScript Cookies

创建和存储 cookie
在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到欢迎词。  首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数: functionsetCookie(c_name,value,expiredays){varexdate=newDate()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+=+escape(value)+((expiredays==null)?:;expires=+exdate.toGMTString())}上面这个函数中的参数存有 cookie 的名称、值以及过期天数。  在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。  之后,我们要创建另一个函数来检查是否已设置 cookie: functiongetCookie(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+1c_end=document.cookie.indexOf(;,c_start)if(c_end==-1)c_end=document.cookie.lengthreturnunescape(document.cookie.substring(c_start,c_end))}}return}上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。  最后,我们要创建一个函数,这个函数的作用是:如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。 functioncheckCookie(){username=getCookie('username')if(username!=null&&username!=){alert('Welcomeagain'+username+'!')}else{username=prompt('Pleaseenteryourname:',)if(username!=null&&username!=){setCookie('username',username,365)}}}这是所有的代码: <html><head><scripttype=text/javascript>functiongetCookie(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+1c_end=document.cookie.indexOf(;,c_start)if(c_end==-1)c_end=document.cookie.lengthreturnunescape(document.cookie.substring(c_start,c_end))}}return}functionsetCookie(c_name,value,expiredays){varexdate=newDate()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+=+escape(value)+((expiredays==null)?:;expires=+exdate.toGMTString())}functioncheckCookie(){username=getCookie('username')if(username!=null&&username!=){alert('Welcomeagain'+username+'!')}else{username=prompt('Pleaseenteryourname:',)if(username!=null&&username!=){setCookie('username',username,365)}}}</script></head><bodyonLoad=checkCookie()></body></html>

js中如何往cookie中放值和取值(图文教程)


下面是我给大家整理的在js中如何往cookie中放值和取值,有兴趣的同学可以去看看。
首先这里有个最基本的概念需要了解,为什么往cookie中存放值。如果你的是jsp页面,那么没有必要,完全使用session对象可以实现你想要的存放的值,当然用cookie也不是不可以。
如果是移动端开发或者单纯的html页面想要存放值在下次打开页面还有效的时候,就得用到cookie了。我使用的前端js插件是jquery.cookie.js。这个可以在网上下载下来,最基本的用法也很简单
第一步:引入js
<script src="/XX/js/login/jquery-1.5.1.min.js"></script>
<script src="/XX/js/login/jquery.cookie.js"></script>第二步:存放值
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
一步写到位,不要轻易把path去掉。不然只能在当前js使用,我吃过亏的
举个实例吧:
需求:城市定位,需要下次进入页面时记住上次自动定位的城市名字或者手动选择的城市名字
百度地图API功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var 城市名= r.address.city;(拿到的城市名字)
//往cookie里面放城市名称
$.cookie('locateCity', 城市名, { expires: 7 ,path:'/'});
}
else {
//alert('failed'+this.getStatus());
mui.alert("城市定位失败");
}
},{enableHighAccuracy: true})第三步:取值
var locateCity = $.cookie('locateCity');上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
javascript实现上传文件到后台接收

a标签如何调用JavaScript

JavaScript中五大常见函数详解

js中如何往cookie中放值和取值(图文教程)


下面是我给大家整理的在js中如何往cookie中放值和取值,有兴趣的同学可以去看看。
首先这里有个最基本的概念需要了解,为什么往cookie中存放值。如果你的是jsp页面,那么没有必要,完全使用session对象可以实现你想要的存放的值,当然用cookie也不是不可以。
如果是移动端开发或者单纯的html页面想要存放值在下次打开页面还有效的时候,就得用到cookie了。我使用的前端js插件是jquery.cookie.js。这个可以在网上下载下来,最基本的用法也很简单
第一步:引入js
<script src="/XX/js/login/jquery-1.5.1.min.js"></script>
<script src="/XX/js/login/jquery.cookie.js"></script>第二步:存放值
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
一步写到位,不要轻易把path去掉。不然只能在当前js使用,我吃过亏的
举个实例吧:
需求:城市定位,需要下次进入页面时记住上次自动定位的城市名字或者手动选择的城市名字
百度地图API功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var 城市名= r.address.city;(拿到的城市名字)
//往cookie里面放城市名称
$.cookie('locateCity', 城市名, { expires: 7 ,path:'/'});
}
else {
//alert('failed'+this.getStatus());
mui.alert("城市定位失败");
}
},{enableHighAccuracy: true})第三步:取值
var locateCity = $.cookie('locateCity');上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
javascript实现上传文件到后台接收

a标签如何调用JavaScript

JavaScript中五大常见函数详解

海亿美食网还为您提供以下相关内容希望对您有帮助:

JavaScript提供的Cookie属性有哪些

在JavaScript中,我们可以使用document.cookie属性创建,读取,更新和删除cookie 。创建cookie的基本语法:document.cookie = “name = value” ;JavaScript的Cookie属性JavaScript提供了一些可选属性来增强cookie的功能,我们来看看这...

JS 操作 cookies 的方法

第三句是将 cookie 内容写入客户端。其中 expires 是系统使用的,表示 cookie 的失效日期(也可以省略),expires 不可读。escape 是对 cookie 值进行编码,这是为了处理中文、空格等而设立的。二、取 cookie 是比较简单的。

js怎么设置cookie得到cookie删除cookie

首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。JS设置cookie:假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则...

在JavaScript中如何实现读取和写入cookie

首先先让我们简单地了解一下cookie.在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cookie机制了。简单说来,cookie提供了一种便捷的方式,能够在用户的计算机上保存少量...

js中如何往cookie中放值和取值(图文教程)

最基本的用法也很简单第一步:引入js 第二步:存放值$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });一步写到位,不要轻易把path去掉。不然只能在当前js使用,我吃过亏的举个实例...

如何用js来操作cookie呢?

js操作COOKIE,直接给document加上cookie就可以了,但是一般如果单个的加会很麻烦所以一般会直接写好一个函数,可以直接操作cookie,这样就很方便了 setCookie这个是写入cookie,第一个是名称,第二个是cookie值,第三个是过期...

如何利用js操作cookie实现记住密码功能

cookie的操作办法最简单的说法就是对document.cookie进行操作(写入你要需保存的内容)。cookie有一个关键字是expires,它是用来设置cookie的有效期的,默认情况(不设置expires)是当浏览器关闭的时候,自动清除cookie。一般来说...

cookie的JavaScript Cookies

首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数: functionsetCookie(c_name,value,expiredays){varexdate=newDate()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+=+escape(value)+(...

js 怎么重新设置cookie

1.生成一个cookie,名称为user,内容为liayun:.cookie("user","liayun");2.cookie的参数设置:.cookie("user","liayun", { expires:7, //过期时间,7天后过期 path:"/", //根目录,path的作用就是设置路径,根...

谁能具体讲解一下javascript里的document.cookie?

&lt;!--//设置两个cookiedocument.cookie="userId=828";document.cookie="userName=hulk";//获取cookie字符串var strCookie=document.cookie;//将多cookie切割为多个名/值对var arrCookie=strCookie.split("; ");var userId;//遍历...

Top