初识 js Cookies

简介: 初识 js Cookies

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

其中document.cookie:不要把这个想的很复杂,其实就是一个用“; ”分隔(注意是一个分号和一个空格)的成对的name1=value1;name2=value2... ...字符串,w3c上这样解释它:该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。

创建和存储 cookie
function setCookie(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 的名称、值以及过期天数。

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

之后,我们要创建另一个函数来检查是否已设置 cookie:

function getCookie(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)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。

最后,我们要创建一个函数,这个函数的作用是:如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}

几个关键变量:

arg:是类似于"__utma"这样一个字符串,也就是查找要查找的cookie的名字加上一个"="

alen:是上面cookie名字加上“=”的字符串长度

clen:是整个cookie字符串的长度

i:初始值为0,每次循环时设置成当前位置加上alen,当前位置就是从name开始的位置

j:初始值为0,每次循环时设置成value结束的位置

stringObject.substring(start,stop):
start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

stringObject.indexOf(searchvalue,fromindex):
searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

以上是getcookie方法的逻辑,下面是setCookie,注意这里的setcookie并没有修改整个cookie字符串的值,而是新添加一个cookie,这个方法没有什么逻辑,但是要注意里面的参数,要不然会带来很多的问题,下面一一列举。

name:要设置的cookie的名字
expires:cookie的过期时间,如果没有这个参数的话,注意这里要使用格林威治时间,没有给给出这个参数,就不会保存到硬盘中而是内存中,这样上面的过期时间就不会显示,而是显示成会话
path:这个参数表示cookie保存的路径,如果没有给出的话会保存为当前站点的,如果给出值"/"的话会保存到当前虚拟目录
domain:这个参数有点类似于session的保存路径,默认情况下保存在当前客户端,也可以保存在其他有写权限的机器上
secure:这个参数应该和安全有关,也没有用到,因为一般保存到cookie数据都是一些搜索历史之类的

  1. Cookie的兼容性问题

Cookie的格式有2个不同的版本,第一个版本,我们称为Cookie Version 0,是最初由Netscape公司制定的,也被几乎所有的浏览器支持。而较新的版本,Cookie Version 1,则是根据RFC 2109文档制定的。为了确保兼容性,JAVA规定,前面所提到的涉及Cookie的操作都是针对旧版本的Cookie进行的。而新版本的Cookie目前还不被Javax.servlet.http.Cookie包所支持。

2. Cookie的内容

同样的Cookie的内容的字符限制针对不同的Cookie版本也有不同。在Cookie Version 0中,某些特殊的字符,例如:空格,方括号,圆括号,等于号(=),逗号,双引号,斜杠,问号,@符号,冒号,分号都不能作为Cookie的内容。这也就是为什么我们在例子中设定Cookie的内容为"Test_Content"的原因。

虽然在Cookie Version 1规定中放宽了限制,可以使用这些字符,但是考虑到新版本的Cookie规范目前仍然没有为所有的浏览器所支持,因而为保险起见,我们应该在Cookie的内容中尽量避免使用这些字符

相关文章
|
JavaScript 前端开发 存储
js,cookies做悬浮购物车
在 “商品列表展示页”做上 “悬浮的”与“DataList”结合的 “无刷新购物车”,只需计算出总价,不必去单独页面结算。找了些资料修改了一下,整理示例如下: gwc.js // JavaScript Document //计算单个小计 function EveryCount() {      var index=window.
895 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
5天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1
|
13天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0