一、序言

最近真是挺忙的啊，导致也挺久没有时间来看看园中各位大神的文章，只能感慨业务真尼玛的多，所以在此写下一篇文章来大话最近工作和学习上面的一点点收获体会，希望大家能够有所收获，这篇文章虽然说是一篇大话的文章，但是在文章内部还是会提供提供一些代码来于各位分享一下

二、问题探索

为什么我会突发奇想发这篇文章呢，原因是因为在一次与领导的谈话中，领导以为我对cookie很是了解，其实我对cookie也只是一知半解，所以为了不辜负领导的期望，我去学习了一下cookie。由于本人在学习的过程中一直是贯彻着这样的几条信条：1、没有经过实践的技术不能算是你自己掌握的 2、技术要服务业务，所以在这个大环境的贯彻下，我在了解完了cookie的用法之后，我便尝试着自己编写一个简单的cookie插件(与其说是插件，不如说是一个方法库)，要实现的功能也是相当的简单的，就是基本的增删查改这个几个功能，其中的删除是一个外带指定删除和全部删除的功能

首先这四个功能中，我们应该最先来实现的是新增的功能

//新增多个cookie

var setCookies=function(keys){

    var code=0;

    var status='';

    var len=keys.length;

    var key='';

    var value='';

    var paramStr="";

    for(var i=0;i<len;i++){

        for(var b in keys[i]){

            key=b;

            value=keys[i][b];

            paramStr+=key+"="+value+';';

        }

        document.cookie=paramStr;

        paramStr="";

        code=2000;

        status='success';

    }

    return {

        code:code,

        status:status

    };

};
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

</head>

<body>

    <script src="cookie.js"></script>

    <script type="text/javascript">

        var test=setCookies([{data:'1asd23',path:'/'},{asd:'123sdfasdf123',path:'/'}]);

        //delCookies('','all');

        //console.log(document.cookie);

        //console.log(test.status);

    </script>

</body>

</html>

说一说我这个cookie的存值设置，不是王婆卖瓜，自卖自夸，我这个的设计是采用对象数组的形式进行传参的，每个对象代表的是一条cookie的参数，这样就可以实现了多个cookie同时存取的功能， 但是也避免了像一些function采用的是指定参数位置，然后通过指定的位置进行获取，这样写可以使用户在使用的时候更加的灵活多样。(我认为好的工具是要面向用户的，即使对象是程序员这个群体，从用户的可用性和易用性出发，才是一个好的工具的根本)。在编写写入cookie的操作的时候，基本上是没有遇见什么大的问题的，接下来的是查和改，查的原理是获取所得有cookie然后匹配里面时候这个字段 ，但是这里在开发的时候有一个问题也是要特别注意的

如果是出现下面的这种情况我们要谨慎处理

假设我们要匹配‘a’，但是现在cookie里面是这样的两条cookie，这个时候如果按照我们的这个思路显然是行不通的

‘a’=1;

'zcvdsd'='a';

所以告诉我们在编写的时候要注意查找key和value的区别，以免发生错误

cookie存入的功能已经实现了，接下来就是要实现删除的功能我们先从全部key删除说起，这里我采用的也是允许多个key传入的方法……，废话不多说，我们接下来就来看一看代码和运行效果：

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

</head>

<body>

    <script src="cookie.js"></script>

    <script type="text/javascript">

        //var test=setCookies([{data:'1asd23',path:'/'},{asd:'123sdfasdf123',path:'/'}]);

        delCookies('','all');

        //console.log(document.cookie);

        //console.log(test.status);

    </script>

</body>

</html>

JavaScript代码：

//删除cookie

var delCookies=function(keys,set){

    if(set=='all'){

        //删除所有的cookie

        console.log(document.cookie);

        var cookies=document.cookie.match(/[^ =;]+(?=\=)/g);

        if(cookies){

            for(var i in cookies){

                //console.log(cookies[i]);i

                console.log(cookies[i]);

                document.cookie=cookies[i]+'=0;expires=' + new Date(0).toUTCString();

                //dconsole.log(new Date(0).toUTCString());

            }

        }else{

        }

    }else{

    }

}

在firefox上面查看结果如下（至于为什么不能再chrome上面查看，请翻阅我上篇文章 cookie学习指南）

这里我们可以看到cookie是没有被删除的，这里我可以保证不是我的代码上面有错误，大家请仔细思考一下为什么，接着我再来揭晓一下。知道答案的一下内容请忽略，好了，相信看下面的内容是不知道答案的小伙伴。在cookie中不止是存在key和value的对应关系，还存在path、domain、secure这些字段，如果我们默认不设置domain的话，那么domain指向的是当前的页面，path默认为空，secure这个字段是用来做HTTPS传输的，但是cookie已经保存在本地了，所以我认为这个属性没什么卵用，为了更清楚的说明问题，我们假设下面的这个场景

假设有这个的两个cookie

document.cookie="'a'=1;domain=test.com;path=../good/";

document.cookie="'a'=1;domain=test.com;path=../test/"

这两个cookie的作用范围分别是根目录下面的good文件夹和test文件夹，但是如果你直接像这样设置document.cookie='"a"=0;expires='+（new Date()-1).toGMTString;这样设置虽然符合将cookie的时间设置为失效就是删除cookie的效果，但是这两条cookie都是存在的，这时你是要告诉计算机你要删除哪一条cookie呢，所以这样的传参是不符合规则的，所以在在删除的时候我们应该把相应的domian、path参数附带上。可以了，

回归正题，我们本次要讨论的问题是为什么目前没有成熟的cookie插件，想一想一款成熟的插件应该具备什么样的特性呢，如果是从IO的角度上面来看的话，那么I==less and simple O==more and complicated，但是如果是从上面的那种情况上来看，就是我们在删除cookie的时候还要存入domain，path这个属性，这样会对用户造成很不友好的感觉，同时Path这个属性还不能让用户随便定义，因为这个最后要转换成为格林威时间字符串的形式才可以生效的，这样显然会使得用户传值有些困难，同时我认为增删查改是一个操作类型的控件的最基本的用法了，如果是连这种用法都困难的话，那么还算什么控件呢，目前市面上有一款叫jquery.cookie.js的插件，但是在删除的时候还是要自己附带上domain和path，所以这款控件也是相当的不成熟

三、总结

在这篇文章中，我阐述了我为什么认为现在没有成熟的cookie控件，如果你觉得我说的有道理的话，请在下方给我一个赞。如果有地方是我说错的，希望大家在评论中指出

为什么目前没有"成熟"的cookie插件？的更多相关文章

  1. 前端编程提高之旅（十）----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  2. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...

  4. jQuery：cookie插件的使用

    Jquery插件就是在Jquery基础之上,开发的基于Jquery的javascript库. 在Jquery中,引入cookie插件后,可以很方便的定义某个cookie的名称,并设置cookie值.通 ...

  5. jQuery之换肤与cookie插件

    有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格. 这个功能可以用jQuery来实现.外加cookie插件.有了cookie,就可以长时间的保存 ...

  6. jQuery cookie插件保存用户登陆信息

    通过jquery cookie插件保存用户登录信息. 代码: <html>  <head>  <title>cookies.html</title>  ...

  7. 20151224jquery学习笔记---cookie插件

    hello,祝自己平安夜快乐. Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登录信息.购物数据信息等一系列微小信息.一． 使用 cookie 插件官方网站: htt ...

  8. jquery cookie插件

    jquery-cookie下载地址:http://www.bootcdn.cn/jquery-cookie/ 使用方法: 1.引入jQuery.Cookie.js插件. <script src= ...

  9. 知问前端——cookie插件

    Cookie是网站用来在客户端保存识别用户的一种小文件.一般可以保存用户登录信息.购物数据信息等一系列微小信息. 一.使用cookie插件 官方网站:http://plugins.jquery.com ...

随机推荐

  1. 一步一步HTML5粒子编辑器

    写在前面 大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加容易理解. MiloYip使用的粒子是canvas中绘 ...

  2. Golang（笔记） 顺序编程

    package main import ( "fmt" "bufio" "io" "os" "strconv& ...

  3. iOS开发之第三方库的学习--hpple的使用

    前言:因为在开发中很可能会遇到html解析,如果后台提供的数据只有html数据,或者开发的app需要从web前端的html里获取数据,就需要html解析工具了. 关于HTML解析库,可以阅读:收集几个 ...

  4. 敏捷开发与jira之燃烧图

    项目当前版本的燃烧图是下面这样的 存在的问题: 1.任务在版本起始时期之后再细化,造成了绿线一直在红线上面.解决方案:版本起始日期定为任务录入结束后的日期 2.工时录入不及时,没有实时反映当前项目组的 ...

  5. CYQ.Data 数据层框架 CYQ.Data 数据框架 使用篇四 MAction 增删改

    本篇内容概要 本篇继续上一篇内容,本节介绍所有增删改的相关操作. 1:添加数据 Insert方法 2:删除数据 Delete方法 3:更新数据 Update方法 一:添加操作 方法原型: public ...

  6. sql 判断 函数 存储过程是否存在的方法

    下面为您介绍sql下用了判断各种资源是否存在的代码,需要的朋友可以参考下,希望对您学习sql的函数及数据库能够有所帮助.库是否存在if exists(select * from master..sys ...

  7. Build 2015 Beijing & Windows 10 China Geek Challenge

    6月5日,借着Build 2015在北京召开分会的东风,参加了这次由微软中国举办的Windows 10中国开发者极客挑战赛. 白天是Build 2015课程,学习了Windows 10最新的技术,包括 ...

  8. 【转】高效Java编程工具集锦

    原文地址:http://geek.csdn.net/news/detail/57469 Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松.目前,市面上涌现出越来越多的高 ...

  9. Java读写文本文件操作

    package com.test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; ...

  10. 13、Apache中虚拟目录和目录权限配置

    一.虚拟目录 之前的个人主页,为了安全起见,需要把~yanji 用户隐藏起来,这时就可以设置个 虚拟目录. 它在Apache服务器应用比较多,能够隐藏系统的真实目录,实用性非常高. 虚拟目录主要 通过 ...