引言:
想必大家一定听过或看过浏览器cookie,早在nokia雄霸天下、我们还不太明白浏览器的时候,cookie就已经悄悄地存在于浏览器的“设置选项”中了。当时它的用途仅仅是让你选择是否“清除”。年少的我很纳闷,这“甜点”(cookie在英语中的解释)是什么意思?
光阴如梭,直到接触到web开发才发现自己以前对cookie的理解是多么可笑,哈哈哈。。。
cookie在浏览器中是什么作用呢?果断找度娘,cookie用来存储网站或用户的数据、行为等信息。比如:用户设置网站的主题,网站将相关的数据记录存在cookie中;用户登录帐户后,点击“记住用户名”,可以使用cookie来记录;网站打开有个弹窗,其中有一个“不再提示”的选项,果断 get√,下次打开就不会出现这个弹窗。。。等等的小例子,大家明白其中的作用吧!
揭露秘密的时刻:
我们来看看你的浏览器下 baidu.com 的cookie吧!
聪明的少年们很快就能注意到,cookie是document下的一个方法。根据经验,document.cookie 可以读取浏览器的cookie值,是不也可以添加或设置cookie值呢?
(注意点:想在本地测试测试浏览器cookie,推荐使用firefox浏览器,其他浏览器可能没有效果。)
cookie的大小依据不同的浏览器而定,一般为4KB,而且服务器语言如PHP,Java等也能操作cookie。
给网站添加cookie:
1 2 3 4 5 6 7 17 18
我们来看看浏览器下的变化吧!
当我们添加cookie是,语句中的 " = " 其实有两个含义:
- 当cookie名称相同是,为覆盖的作用
- 当cookie名称不同时,为添加操作
浏览器下出现了两条cookie记录,每条记录之间以 '; '分隔(记得分号后面必须要有空格)。在firebug展现的表格中有“过期时间”和“最长有效期”两项值得我们注意。
设置cookie的有效期:在添加浏览器cookie时,有这样的一个参数来设置cookie的有效期(也可以叫做过期时间):expires
代码走起:
1 2 3 4 5 6 7 18 19
上面的代码可以方便的实现本站点下cookie的创建、修改、删除的功能,那么我们如何获取具体的cookie值呢?
1 2 3 4 5 6 7 8 9 42 43
简单分析:
我们使用 document.cookie.split("; "); 来分割获取的cookie记录,在 for 循环中二次切割每一条 cookie记录,这样的话我们就能够轻松地获取想要的啦!