脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascrip cookie，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

首先要明确一下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天

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-javascrip cookie全部内容，希望文章能够帮你解决javascript代码实例教程-javascrip cookie所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。