JavaScript数据存储 Cookie篇
1.什么是cookie?
答:cookie是用于在客户端存储会话信息的。
2.cookie的组成部分?
①名称:一个唯一确定cookie 的名称。建议区分大小写。cookie 的名称必须是经过URL 编码的。
②值:储存在cookie 中的字符串值。值必须被URL 编码。
③域:cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie 信息。这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.com,则对于wrox.com的所有子域都有效)。如果没有明确设定,那么这个域会被认作来自设置cookie 的那个域。
④路径:对于指定域中的那个路径,应该向服务器发送cookie。例如,你可以指定cookie 只有从http://www.wrox.com/books/ 中才能访问,那么http://www.wrox.com 的页面就不会发送cookie 信息,即使请求都是来自同一个域的。
⑤失效时间:表示cookie 何时应该被删除的时间戳。默认情况下,浏览器会话结束时即将所有cookie 删除;不过也可以自己设置删除时间。这个值是个GMT 格式的日期(Wdy, DD-Mon-YYYY HH:MM:SS GMT),用于指定应该删除cookie 的准确时间。因此,cookie
可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间,则cookie 会被立刻删除。
⑥安全标志:指定后,cookie 只有在使用SSL 连接的时候才发送到服务器。例如,cookie 信息只能发送给https://www.wrox.com,而http://www.wrox.com 的请求则不能发送cookie。
3.列举一个cookie的例子?
以下是一个完整的cookie的例子,我们将把它分解开来:
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
①名称: name字符串表示
②值:value字符串表示
③过期时间:Mon, 22-Jan-07 07:10:24 GMT
④域名:.wrox.com
⑤路径:当前目录/
⑥安全标志:secure
4.如何操作cookie?
var CookieUtil = { // 设置cookie set : function (name, value, expires, domain, path, secure) { var cookieText = ""; cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); } if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } document.cookie = cookieText; }, // name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure // 获取cookie get : function (name) { var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = ""; if (cookieStart > -1) { var cookieEnd = document.cookie.indexOf (";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); } return cookieValue; }, // 删除cookie unset : function (name, domain, path, secure) { this.set(name, "", Date(0), domain, path, secure); } }; // 测试 CookieUtil.set("name", "zhang"); var name = CookieUtil.get("name"); alert(name); // zhang CookieUtil.unset("name"); alert(CookieUtil.get("name")); // 空
5.cookie的限制
①存储数据数量有限
②保了储存在cookie 中的信息只能让批准的接受者访问,而无法被其他域访问
③安全性有限
6.针对cookie数据存储少量的问题,我们提出了子cookie的概念。即在每条cookie的值中存储多条数据,用"&"隔开。
var SubCookieUtil = { /** 设置一条完整的cookie * param name : 表示cookie的名称,必填 * param subCookies : 表示cookie的值,为一个对象,必填 * param expires : 表示cookie的过期时间,可以不填 * param domain : 表示cookie的域名,可以不填 * param path : 表示cookie的路径,可以不填 * param secure : 表示cookie的安全标志,可以不填 * eg : SubCookieUtil.setAll("info", { name : "zhang", age : 23}); **/ setAll : function (name, subCookies, expires, domain, path, secure) { var cookieText = "", subName, cookieParts = []; cookieText += encodeURIComponent(name) + "="; for(subName in subCookies) { cookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName])); } if (cookieParts.length > 0) { cookieText += cookieParts.join("&"); if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); } if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } } else { cookieText += "; expires=" + Date(0).toGMTString(); } document.cookie = cookieText; }, /** 设置一条子cookie * param name : 表示cookie的名称,必填 * param subName : 表示子cookie的名称,必填 * param value : 表示子cookie的值,必填 * param expires : 表示cookie的过期时间,可以不填 * param domain : 表示cookie的域名,可以不填 * param path : 表示cookie的路径,可以不填 * param secure : 表示cookie的安全标志,可以不填 * eg : SubCookieUtil.set("info", "sex", "boy"); **/ set : function (name, subName, value, expires, domain, path, secure) { var cookies = this.getAll(name) || {}; cookies[subName] = value; this.setAll(name, cookies, expires, domain, path, secure); }, /** 读取一条完整cookie * param name : 表示cookie的名称,必填 * return : 一个cookie对象 * eg : SubCookieUtil.getAll("info"); **/ getAll : function (name) { var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = "", i, len, subCookies, parts, result = {}; if (cookieStart > -1) { var cookieEnd = document.cookie.indexOf (";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); if (cookieValue.length > 0) { subCookies = cookieValue.split("&"); for (i = 0, len = subCookies.length; i < len; i++) { parts = subCookies[i].split("="); result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]); } return result; } } return null; }, /** 获取一条子cookie的值 * param name : 表示cookie的名称,必填 * param subName : 表示子cookie的名称 * return : 一个子cookie的值 * eg : SubCookieUtil.get("info", "name"); **/ get : function (name, subName) { var cookies = this.getAll(name); if (cookies) { return cookies[subName]; } else { return null; } }, /** 删除一条完整cookie * param name : 表示cookie的名称,必填 * param domain : 表示cookie的域名,可以不填 * param path : 表示cookie的路径,可以不填 * param secure : 表示cookie的安全标志,可以不填 * eg : SubCookieUtil.unsetAll("info"); **/ unsetAll : function (name, domain, path, secure) { this.setAll(name, "", Date(0).toGMTString(), domain, path, secure); }, /** 删除一条子cookie * param name : 表示cookie的名称,必填 * param subName : 表示子cookie的名称,必填 * param domain : 表示cookie的域名,可以不填 * param path : 表示cookie的路径,可以不填 * param secure : 表示cookie的安全标志,可以不填 * eg : SubCookieUtil.unset("info", "name"); **/ unset : function (name, subName, domain, path, secure) { var cookies = this.getAll(name); if (cookies) { delete cookies[subName]; this.setAll(name, cookies, null, domain, path, secure); } } }; // 测试: var zhang = { name : "zhang", age : 23, height : "178cm", weight : "66kg" } // 设置一条完整的cookie SubCookieUtil.setAll("zhang", zhang); // 获取一条完整的cookie var zhang = SubCookieUtil.getAll("zhang"); alert(zhang.weight); // 66kg // 再为张添加一个子cookie SubCookieUtil.set("zhang", "sport", "basketball"); // 获取子cookie alert(SubCookieUtil.get("zhang", "sport")); // basketball // 删除一条子cookie SubCookieUtil.unset("zhang", "age"); alert(SubCookieUtil.get("zhang", "age")); // undefined // 删除一条完整的cookie SubCookieUtil.unsetAll("zhang"); alert(SubCookieUtil.getAll("zhang")); // 报错,因为已经被删除
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29