资讯专栏INFORMATION COLUMN

javascript中的cookie问题

Yujiaao / 1008人阅读

摘要:为了解决这个问题,引入了机制。一写入写入主要设置五个字段,内容有效期域名路径是否安全传输。被修改为要删除,只需将该有效期设置到当前时间以前即可。其中有效期单位为天。

在他处看到一篇好文章,想记录在自己的学习笔记中,原文作者看到我转载若是介意,联系我立马就删除,附上原文链接:
http://blog.csdn.net/sunhengzhe/article/details/46694039

首先要明确一下cookie的概念,因为HTTP协议是一种无状态协议,也就是说一旦服务器和客户端的数据交换完毕后,他们之间的连接就会被断开,再次交换数据的时候就需要再次建立连接,这就意味着服务器无法从连接上判断客户端。
为了解决这个问题,W3C引入了cookie机制。cookie就好比一个身份证,客户端请求服务器的时候,服务器将这个身份证颁发给客户端,客户端(浏览器)将这个身份证保存在本地,当下次连接服务器时,客户端携带这个身份证请求服务器,服务器根据身份证即可确定用户身份。
cookie不仅客户端能访问到,因为客户端请求服务器的时候会将cookie放在请求头里带到服务器,所以服务器也能对cookie进行操作,这里讨论使用javascript在客户端对cookie进行操作的方法。

一、写入cookie

写入cookie主要设置五个字段,内容、有效期、域名、路径、是否安全传输。

内容

cookie是以键值对形式保存的,要新建一个名为name,值为zhangsan的cookie就是“name=zhangsan”,只需将这个cookie赋值给document.cookie即可:

document.cookie = "name=zhangsan";  //添加cookie

document.cookie有读和写两种形式,上面这个形式便是写形式,写形式代表添加cookie,且一次只能添加一条cookie,要添加多条则需要调用多次。如

document.cookie = "name=zhangsan;age=10"; //无效,只添加了name,忽略age
document.cookie = "age=10";  //添加age
有效期

默认情况下,cookie在关闭浏览器的时候就会被清除,想让cookie存放更长时间可以通过设置expires字段实现。
expires字段需要的值是GMT(格林威治时间)格式的日期型字符串,可以用Date对象得到:

var date = new Date();
//将时间设置成30分钟以后
date.setTime(date.getTime() + 30 * 60 * 1000);
//name=zhangsan将在30分钟后过期
document.cookie = "name=zhangsan;expires="+date.toGMTString();

想调整过期时间,只需要改动setTime一行的代码。

域名

处于安全性的考虑,cookie是具有不可跨域性的,用户访问百度的时候,百度为客户端颁发了一个cookie,用户再去访问谷歌,谷歌给客户端颁发一个cookie,那么百度和谷歌是不能访问到彼此的cookie的。
但是一般来说,我们访问baidu.com的时候会发现,你是可以访问到map.baidu.com的cookie的,这是因为给cookie设置了domian属性,因为map.baidu.com和baidu.com具有同样的域名baidu.com,所以可以为cookie设置domian值为baidu.com

document.cookie = "name=zhangsan;domain=baidu.com";
路径

同样道理,blog.csdn.net是访问不到blog.csdn.net/sunhengzhe里面的cookie的(但反过来可以),为了使上级目录访问到下级目录,在blog.csdn.net/sunhengzhe里新建cookie时,可以为cookie设置path属性,一般可以直接将其设置为根目录

document.cookie = "name=zhangsan;path=/";
安全传输

cookie是保存在客户端本地的,所以查看cookie是很方便,这也暴露了cookie的不安全性,所以一般cookie不存放如密码等重要信息,secure属性并不是用来设置cookie内容的安全性的,而是用于传输过程中的安全,设置secure后,只保证 cookie 与服务器之间的数据传输过程加密,而保存在本地的 cookie文件并不加密。所以如果是想让本地保存的cookie也加密的话,最好在保存cookie值的时候就保存加密后的数据。

document.cookie = "name=zhangsan;secure";
二、读取cookie

读取cookie使用到document.cookie的读模式,返回的就是所有的cookie,中间用分号隔开。

document.cookie = "name=zhangsan";  //写
document.cookie = "age=10";  //写
console.log(document.cookie);  //输出 name=zhangsan; age=10
三、删除、修改cookie

cookie并不提供删除、修改的方法,如果想修改某项cookie,只需添加一个同名cookie,新的值将覆盖旧的值。

document.cookie = "name=zhangsan";
document.cookie = "name=lisi";  //name被修改为lisi

要删除cookie,只需将该cookie有效期设置到当前时间以前即可。

var date = new Date();
//设置为前一毫秒(多前都可以)
date.setTime(date.getTime() - 1);
//删除name
document.cookie = "name=lisi;expires=" + date.toGMTString();
四、封装操作cookie的方法

使用原生方法对cookie操作是有些麻烦的,我们可以将其封装起来,name代表键名,value代表值,不填则为读取名为name的值,option代表设置值如有效期等。其中有效期单位为天。

function cookie(name, value, options) {
    if (typeof value != "undefined") {
        options = options || {};
        //如果值为null, 删除cookie
        if (value === null) {
            value = "";
            options = {
                expires: -1
            };
        }
        //设置有效期
        var expires = "";
        if (options.expires && (typeof options.expires == "number" || options.expires.toGMTString)) {
            var date;
            if (typeof options.expires == "number") {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = ";expires=" + date.toGMTString();
        }
        var path = options.path ? ";path=" + (options.path) : "";
        var domain = options.domain ? ";domain=" + (options.domain) : "";
        var secure = options.secure ? ";secure" : "";
        //设置cookie
        document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("");
    } else {
        //读取cookie
        if (document.cookie.length > 0) {
            var start = document.cookie.indexOf(name + "=")
            if (start != -1) {
                start = start + name.length + 1;
                var end = document.cookie.indexOf(";", start);
                if (end == -1){
                    end = document.cookie.length;
                }
                return decodeURIComponent(document.cookie.substring(start, end));
            }
        }
        return ""
    }
}

cookie("name", "zhangsan"); //添加name=zhangsan
cookie("name", null); // 删除name
cookie("age", "10", {
    expires: 30
}); // 添加age=10且有效期30天

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78357.html

相关文章

  • JavaScript BOM Cookie 的用法

    摘要:如果您的浏览器已关闭本地支持,则以下示例均无效。删除时,不必指定值。但事实并非如此。访问者第一次到达网页时,将要求他她填写他她的姓名。检查的功能最后,我们创建一个函数来检查是否设置了。 JavaScript Cookie Cookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时,连接将关闭,服务器将忘记用户的所有内容。发明Cookie是为了解决如何记住用户信息...

    Carbs 评论0 收藏0
  • JavaScript之读取和写入cookie

    摘要:本身是一些短小的信息,能够由页面保存在用户的计算机上,然后被其他页面读取。当然,也有局限之处浏览器对于能够保存的数量有所限制,通常是几百个或者多一点。因此,不适合用来保存重要数据,在编写代码时也要考虑到获取异常的处理方法。   首先先让我们简单地了解一下cookie.  在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cooki...

    SoapEye 评论0 收藏0
  • 关于Cookie的那些事

    摘要:假设有两个域名域名域名域名有分级的概念,也就是说域名与域名都是的子域名,又是的子域名在域名所使用的服务中,可以设置域名在服务端设置的时候,设置为或没有区别,注意前面的点,即只要是为显式的声明,前面带不带点没有区别。 1 Cookie简介 Cookie是由W3C组织提出,最早由NetScape社区发展的一种机制。Cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某...

    sf_wangchong 评论0 收藏0
  • 关于Cookie的那些事

    摘要:假设有两个域名域名域名域名有分级的概念,也就是说域名与域名都是的子域名,又是的子域名在域名所使用的服务中,可以设置域名在服务端设置的时候,设置为或没有区别,注意前面的点,即只要是为显式的声明,前面带不带点没有区别。 1 Cookie简介 Cookie是由W3C组织提出,最早由NetScape社区发展的一种机制。Cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某...

    alogy 评论0 收藏0
  • 前端—初级阶段5(16-20)

    摘要:一垃圾回收与内存泄漏参考内存控制垃圾回收的垃圾回收策略主要基于分代式垃圾回收机制。内存泄漏内存泄漏的实质就是应当回收的对象因为意外没有被回收,变成了常驻在老生代中的对象。造成内存泄漏的主要原因有缓存队列消费不及时作用域未释放。 内容 1.内存泄漏与垃圾回收2.cookie和session3.单线程原理4.上下左右居中的几种实现。5.BFC和IFC模型。 一、垃圾回收与内存泄漏 参考:内...

    2i18ns 评论0 收藏0

发表评论

0条评论

Yujiaao

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<