javascrip cookie

首先要明白一下cookie的概念。由于HTTP协议是一种无状态协议,也就是说一旦server和client的数据交换完成后,他们之间的连接就会被断开。再次交换数据的时候就须要再次建立连接。这就意味着server无法从连接上推断client。

为了解决问题,W3C引入了cookie机制。cookie就好比一个身份证,client请求server的时候。server将这个身份证颁发给client。client(浏览器)将这个身份证保存在本地。当下次连接server时。client携带这个身份证请求server。server依据身份证就可以确定用户身份。

cookie不仅client能訪问到,由于client请求server的时候会将cookie放在请求头里带到server,所以server也能对cookie进行操作。这里讨论使用javascript在client对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是具有不可跨域性的。用户訪问百度的时候。百度为client颁发了一个cookie,用户再去訪问谷歌。谷歌给client颁发一个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是保存在client本地的。所以查看cookie是非常方便,这也暴露了cookie的不安全性,所以一般cookie不存放如password等重要信息,secure属性并非用来设置cookie内容的安全性的,而是用于传输过程中的安全,设置secure后,仅仅保证 cookie 与server之间的传输数据过程加密,而保存在本地的 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天
时间: 2024-10-07 01:35:33

javascrip cookie的相关文章

JavaScrip操作Cookie

//生成cookie function addCookie(sName, sValue, day) { var expireDate = new Date(); expireDate.setDate(expireDate.getDate() + day); //设置失效时间 document.cookie = escape(sName) + '=' + escape(sValue) + ';expires=' + expireDate.toGMTString()+';path=/'; } //读

记录一些有关web安全以及cookie、session的文章

session和cookie的区别和联系:http://www.cnblogs.com/endlessdream/p/4699273.html HTTP是无状态的协议,那么客户端与服务端的数据一旦交互完毕,客户端与服务器端的链接也就会关闭了,当再次交换数据的时候就需要建立新的链接,也就是服务器无法从链接上跟踪会话: 会话跟踪:是web程序中常用的技术,用来跟踪用户的整个会话的,常用的会话跟踪技术是Cookie和Session.Cookie通过在客户端记录信息确定用户身份后,Session通过在服

(转)妙味课堂—JavaScrip中级课程笔记

DOM基础概念.操作 DOM的概念及节点类型 childNodes children nodeType attributes 子节点和兄弟节点的操作 firstChild firstElementChild lastChild.lastElementChild nextSibling.previousSibling 父节点 parentNode offsetParent 元素位置宽高 offsetLeft.offsetTop offsetWidth.offsetHeight getPos() 操

js Cookie 学习笔记

<1>设置cookie <script type="text/javascript"> window.onload=function(){ document.cookie="myName=C_world"; } <script> <2>获取cookie <script type="text/javascript"> window.onload=function(){ var myName

COOKIE+SESSION

cookie的缺点: 因为cookie保存在浏览器上,所以安全性低可控性比较差,只能存放字符串大多数的浏览器对cookie有4K的限制. 下面是cookie在浏览器和服务器中请求与响应的过程: 1.    COOKIE的工作原理 cookie过程描述 网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密) 用户第一次访问你的网站->在服务器端会将用户的信息设置为cookie(可以理解为制造饼干过程)->通过http协议发送给用户(浏览器),在用户端,coo

会话技术Session&amp;Cookie

一.会话技术简介 1.存储客户端的状态 由一个问题引出今天的内容,例如网站的购物系统,用户将购买的商品信息存储到哪     里?因为Http协议是无状态的,也就是说每个客户访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术识别客户端的状态.会话技术是帮助服务器   记住客户端状态(区分客户端) 举例购物过程: 2.会话技术 从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,成为一次会话.会话技术就是记录这次会话中客户端的状态与数据的. 会话技术分为Cookie和Sessio

JS设置读取删除cookie及表单交互

学习cookie和表单交互留下的一点笔记 什么是cookie?cookie 是存储于客户端的变量.当设备请求页面时,就会发送cookie.首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式.各个cookie之间一般是以";"分隔.JS设置cookie:document.cookie= key + '=' + value + ';expires=' + Date;其中Date为cookie的过期时间.实际案例: //setCo

session和cookie的区别

原作者:施杨(施杨's Think out)出处:http://shiyangxt.cnblogs.com 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie 里的内容来判断使用者,送出特定的网页内容给你. Cookie 的使用很普遍,许多有提供个人化服务的网站,都是利用 Cook

cookie和session得区别

1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. Session其实是利用Cookie进行信息处理的,当用户首先进行了请求后,服务端就在用户浏览器上创建了一个Cookie,当这个Session结束时,其实就是意味着这个Cookie就过期了. 注:为这个用户创建的Cookie的名称是aspsessionid.这个Cookie的唯一目的就是为每一个用