今天想把js cookie的有关知识通过实例来熟悉一下整个创建,读取,以及其他比如修改删除等操作的过程。实例呢就按照w3shcool上个的走一遍。
首先回顾一下cookie的相关知识吧。
(一)什么是cookie?
①简单的来说,当我们用户与web网页进行交互的时候,我们输入的信息保存地就是cookie,也就是说cookie里面保存了我们很多数据信息,而且是以键值对的形式保留的,比如username=andy
②还需要明白的是,当我们客户端向web服务器发送请求后,服务器给我们客户端发来网页信息,然后服务端会关闭链接,不会对我们用户输入的数据进行保留,那么只能在客户端上进行操作,cookie就应运而生。当我们在客户端保留了客户信息后,再向服务器请求web页面时,创建的cookie也包含在请求当中供给服务器识别用户信息。
(二)对cookie进行的操作
①首先是怎么创建一个新的cookie
document.cookie属性便可以实现对cookie的操作。比如document.cookie=“username=job”;当然字符串里面还可以添加其他属性,比如添加时间信息,document.cookie="username=job; expires=Thu, 18 Dec 2016 20:52:00 GMT";
(这里补充一下时间的格式GMT和UTC的详细说明,GMT是指格林尼治时间,格林尼治标准时间的正午是指当太阳横穿格 林尼治子午线时(也就是在格林尼治上空最高点时)的时间。但会有16分钟的时间差。UTC是协调时间,世界统一时间,是以原子时秒长为基础,在时刻上尽量接近于世界时的一种时间计量系统。)———百度百科
上面创建的cookie包含时间和姓名的数据信息。
②那么我们怎么去读取这个新建的cookie呢?
var x=document.cookie也就是先将新创建的cookie赋值给一个变量,将以字符串的形式返回所有cookie的信息。
当我们创建了一个名为cookie的信息后,旧的和cookie同名的将被覆盖掉,当然如果名字不一样两者都存在。
③这里再介绍一个删除cookie的方式
document.cookie="username=job; expires=Thu, 18 Dec 1997 20:52:00 GMT";那就是设置一个过去的时间即可,当然里面的赋值也就可以省略不写了
(三)理解实例
创建一个cookie来存贮访问者的姓名,再次访问时会出现欢迎页面
首先整个架构分为三块:创建,读取,修改
第一部分:创建
这一部分很简单,
function setCookie(cname,cvalue,exdays) // 该函数创建一个cookie,包含姓名,值,日期信息
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000)); // 日期都是以毫秒为单位计时的,1s=1000ms
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}