引言：

想必大家一定听过或看过浏览器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：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 </head>

 <body>

 <script>

 window.onload = function() {

     addCookie();

 }

 function addCookie() {

     document.cookie = "123=123";

     document.cookie = "abc=abc";

 }

 </script>

 </body>

 </html>

我们来看看浏览器下的变化吧！

当我们添加cookie是，语句中的 " = " 其实有两个含义：

  • 当cookie名称相同是，为覆盖的作用
  • 当cookie名称不同时，为添加操作

浏览器下出现了两条cookie记录，每条记录之间以 '; '分隔（记得分号后面必须要有空格）。在firebug展现的表格中有“过期时间”和“最长有效期”两项值得我们注意。

设置cookie的有效期：在添加浏览器cookie时，有这样的一个参数来设置cookie的有效期（也可以叫做过期时间）：expires

代码走起：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 </head>

 <body>

 <script>

 window.onload = function() {

     setCookie('name', 'value', 10);

 }

 function setCookie(name, value, expiredays){

     var exdate=new Date();

     exdate.setDate(exdate.getDate() + expiredays);

     document.cookie=name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

 }

 </script>

 </body>

 </html>

上面的代码可以方便的实现本站点下cookie的创建、修改、删除的功能，那么我们如何获取具体的cookie值呢？

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 </head>

 <body>

 <input type="text" id="input" placeholder="获取cookie值" /> <button id="getCookie">获取cookie值</button>

 <p id="values"></p>

 <script>

 window.onload = function() {

     setCookie('name01', 'value01', 10);

     setCookie('name02', 'value02', 10);

     setCookie('name03', 'value03', 10);

     setCookie('name04', 'value04', 10);

     document.getElementById("getCookie").onclick = function(){

         var inputValue = document.getElementById('input').value;

         document.getElementById('values').innerHTML = '';

         if(inputValue!=''){

             getCookieValue(inputValue);

         }else{

             document.getElementById('values').innerHTML = "<span style='color:red;'>输入错误</span>";

         }

     };

 }

 function getCookieValue(cName){

     var cookieArry = document.cookie.split("; ");

     for (var i = 0; i < cookieArry.length; i++) {

         var cookieSubArry = cookieArry[i].split("=");

         if(cookieSubArry[0]==cName){

             document.getElementById('values').innerHTML = cookieSubArry[1];

         }

     };

 }

 function setCookie(name, value, expiredays){

     var exdate=new Date();

     exdate.setDate(exdate.getDate() + expiredays);

     document.cookie=name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

 }

 </script>

 </body>

 </html>

简单分析：

我们使用 document.cookie.split("; "); 来分割获取的cookie记录，在 for 循环中二次切割每一条 cookie记录，这样的话我们就能够轻松地获取想要的啦！

浅谈JS-cookie，你是香甜可口的小点心吗？的更多相关文章

  1. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  2. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  3. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  4. 浅谈 js 正则字面量 与 new RegExp 执行效率

    原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...

  5. 浅谈 js 字符串之神奇的转义

    原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...

  6. 浅谈 js 正则之 test 方法

    原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...

  7. 浅谈 js 数字格式类型

    原文:浅谈 js 数字格式类型 很多人也许只知道 ,123.456,0xff 之类的数字格式.其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有人说这是 ...

  8. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  9. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

随机推荐

  1. Spring入门第一课：Spring基础与配置Bean

    1.入门 Spring是简化java开发的一个框架,其中IoC和AOP是Spring的两个重要核心.由于Spring是非侵入性的,通过Ioc容器来管理bean的生命周期,还整合了许多其他的优秀框架,所 ...

  2. c#一个日志类（log4net）

    这个类就是对log4net的使用,就不多说了,但是看见网上的一个封装,自己用了下,感觉还不错,直接记录在这里.把自己使用的类直接贴出来. using log4net; using log4net.Co ...

  3. stl学习之namespace

    一.为什么需要命名空间(问题提出) 命名空间是ANSIC++引入的可以由用户命名的作用域,用来处理程序中常见的同名冲突. 在 C语言中定义了3个层次的作用域,即文件(编译单元).函数和复合语句.C++ ...

  4. IIS网站的应用程序与虚拟目录的区别及应用

    IIS网站 一个网站可以新建无数个应用程序和目录 应用程序 同一域名下程序的独立开发,独立部署的最佳应用策略. 应用程序的应用场景: 1. 域名的分布 比如:www.baidu.com,对于后台,我们 ...

  5. cut 的用法

    cut 文件内容查看 显示行中的指定部分,删除文件中指定字段 显示文件的内容,类似于下的type命令. 说明 该命令有两项功能,其一是用来显示文件的内容,它依次读取由参数file所指明的文件,将它们的 ...

  6. angular.js-1初识

    初识AngularJS AngularJS 为了克服HTML在构建页面上的不足,通过新的属性和表达式扩展了 HTML(AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML). ...

  7. xp sp3安装.Net 4.0提示严重错误，0x80070643，解决办法2017版

    客户电脑上要装金税开票软件,需要.net 4.0.30319.1,电脑环境是xp sp3,已经安装了.net 2, .net 3.5sp1,安装.net 4.0的时候提示错误0x80070643 因为 ...

  8. MySQL集群-PXC搭建以及使用innobackupex工具进行全局备份和增量备份

    环境:centos7 vm1:10.154.47.236 vm2:10.154.52.189 vm3:10.105.12.50 目的:pxc使用三个节点构建mysql集群,使用innobackupex ...

  9. rails中发送ajax请求

    最近在写一个blog系统练练手,遇到一个一个问题,用户添加评论的时候想发送ajax请求,但是rails里的ajax和Python中的不太一样,Python中的ajax是用js,jquery实现的和ra ...

  10. Goland的常用快捷键

    文件相关快捷键: CTRL+E,打开最近浏览过的文件. CTRL+SHIFT+E,打开最近更改的文件. CTRL+N,可以快速打开struct结构体. CTRL+SHIFT+N,可以快速打开文件. 代 ...