初识 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的内容中尽量避免使用这些字符

相关文章
|
5月前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
355 2
|
5月前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
245 0
|
JavaScript 前端开发 存储
js,cookies做悬浮购物车
在 “商品列表展示页”做上 “悬浮的”与“DataList”结合的 “无刷新购物车”,只需计算出总价,不必去单独页面结算。找了些资料修改了一下,整理示例如下: gwc.js // JavaScript Document //计算单个小计 function EveryCount() {      var index=window.
922 0
|
JavaScript 前端开发
javascript cookies 存、取、删除实例
//写cookies函数 作者:翟振凯 function SetCookie(name,value)//两个参数,一个是 cookie 的名子,一个是值 {     var Days = 30; //此 cookie 将被保存 30 天     var exp  = new ...
865 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
26天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0