有关cookie的知识

定义

cookie的中文意思为临时存储数据，对于前端初学者而言只要知道cookie的两个用法怎么存cookie与怎么取cookie即可。
在说明cookie的用法前先说一下服务器。服务器包括：数据库环境（存储账号密码）、语言环境（php等）、服务器环境。在这种情况下我们需要一个集成环境来配合讲解cookie。我们可以下载windows常用的php开发集成环境wamp软件。wamp软件涵盖了：windows（操作系统）、Apache(服务器) 、mySql（数据库）、PHP（后台语言）等几个要素，小伙伴们只需要下载好wamp成功安装后便可以开搞啦。在大家安装好以后在下方的工具条会出现绿色的图标证明环境安装已经成功可以使用了。

Paste_Image.png

我们在安装好以后使用代码编辑器时要将相应的文件夹建立在wamp文件下的www文件目录中

Paste_Image.png

在做好这些准备后我们可以开始啦！
我们说cookie需要会的是两点——怎么存cookie与怎么取cookie。
最简单的存法如：document.cookie=123;这样我们就在浏览器中存了一条cookie，不过它没有名字是没有意义的。升级一下:document.cookie='abc=123'这个意思是指存了一条名字为abc值为123的cookie。好，接下来我们在浏览器试一下。为什么要在wamp的www文件中存储呢，是因为他的打开方式有些不同。
首先我们打开浏览器在网址中输入localhost来打开页面，成功之后如图所示：

Paste_Image.png

接下来我们可以点击我们需要的文件了（在Your Projects里）。
我们首先用如下代码来试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            document.cookie=123;
        }
    </script>
</head>
<body>
    
</body>
</html>

然后我们打开相应的页面，F12，打开浏览器控制台，找到Application，打开cookie

Paste_Image.png

如图所示，我们看到了一条没有名字的cookie是不是很有意思，接下来我们给他填一个名字，如上边的代码稍作改动，以同样的方式打开。

Paste_Image.png

是不是有了名字，很简单吧。
对于cookie还有路径path的问题：内层文件的cookie外层文件取不到，内层文件可以取到外层文件。在一般工作中一套代码，一套cookie存在一层目录级中，所以一般情况下存在根目录下 /下。这些在后边的代码有所体现，请小伙伴们注意。
接下来我们说一下cookie的特点以便后续的说明。
cookie的特点：
1、cookie必须放在服务器环境中
2、存入和取出都是字符串
3、cookie是有过期时间的（有周期：expires）默认浏览器关闭就消失
4、cookie是不安全的 F12可以查看删除
5、cookie比较珍贵
下面详细解释：第一条上边以讲过不在赘述。
第二条我们说cookie的存入和取出都是字符串，意思是名字与value等值都在一起形成一个大字符串我们后边的代码会表现出来以及处理的方法。
第三条：cookie都有一个过期时间，以英文单词expires表示，一般默认为session（临时会话）即打开窗口显示cookie关闭窗口消失，大家可以创建两个不同的cookie来试一下。不过这个过期值我们说是可以设定的大家平时上一些网站都会有自己的帐号与密码，有时浏览器会询问你是否存起来，存起来的话短期内登录是无需再次输入的就是这个道理。后边的代码会有表现。
第四条我们打开F12并通过Application的方式打开发现可以delete删除，并且可以看到一些数据就算是加密也是不安全的。所以说小伙伴们要在安全的地方才能登录哦。
第五条由于一些历史原因cookie很小，每个浏览器对cookie都有一定的限制，在使用时需要格外注意。总大小一定要小于20条，小于4k。
接下来我们上一段演示代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+3);
        document.cookie='abc=123; expires='+oDate;
        alert(document.cookie);    
    </script>
</head>
<body>

</body>
</html>

Paste_Image.png

以上代码结合cookie的特点我们可以看出给cookie设置了过期时间设置的过期时间为三天以后，并且大家注意到没有cookie在代码中是一个大字串，我们后边获取相应的值也需要转换的方法。
我们不可能总是输入长串代码来设置cookie的相应值，所以我们要对设置cookie值进行封装
代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
         function setCookie(sName,sValue,iDay){
            if(iDay){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+iDay);

                document.cookie=sName+'='+sValue+'; path=/; expires='+oDate;
            }else{
                document.cookie=sName+'='+sValue+'; path=/';
            }
        }
        setCookie('aaa','111',3);
        setCookie('bbb','222',4);
        setCookie('ccc','333',5);
    </script>
</head>
<body>

</body>
</html>

进行上述封装后我们就可以任意设置我们需要的cookie值了。sName代表的是cookie的名字，svalue代表value值，过期时间可以设置也可以不设置相应的if条件上述代码也已经给出，小伙伴们可以自己敲一下感受一哈加深印象。

Paste_Image.png

大家看一下我们设置了三条cookie，都已经显示在上面时间也和我们跳的一样。
接下来我们讲一下如何获取cookie值，当然也进行封装。我们在上述的设置cookie封装的情况下获取cookie值以便大家有一个更直观的认识。插播一下我们将上述代码alert（document.cookie）一下弹出的是

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4795694-48754363eddb93a7.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为一个字符串，下面进行获取cookie值的封装
代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
         function setCookie(sName,sValue,iDay){
            if(iDay){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+iDay);

                document.cookie=sName+'='+sValue+'; path=/; expires='+oDate;
            }else{
                document.cookie=sName+'='+sValue+'; path=/';
            }
        }
        setCookie('aaa','111',3);
        setCookie('bbb','222');
        setCookie('ccc','333',5);
        alert(document.cookie)       
         function getCookie(sName){
            var str=document.cookie;
            var arr=str.split('; ');
            for(var i=0;i<arr.length;i++){
                var arr2=arr[i].split('=');
                if(arr2[0]==sName){
                    return arr2[1]
                }
            }
            return ''
        }
        getCookie('aaa');
        alert(getCookie('aaa'))
    </script>
</head>
<body>

</body>
</html>

我们为了获取相应的cookie值传入了对应的name值，将字符串进行转换转换为数组形式的数据return出来，我们就可以获取相应的值。

Paste_Image.png

小伙伴们可以自己试一下捋清逻辑加深印象。
当然有获取就有删除，我们加入删除cookie代码
代码示例：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
        function setCookie(sName, sValue, iDay) {
            if (iDay) {
                var oDate = new Date();
                oDate.setDate(oDate.getDate() + iDay);

                document.cookie = sName + '=' + sValue + '; path=/; expires=' + oDate;
            } else {
                document.cookie = sName + '=' + sValue + '; path=/';
            }
        }
        setCookie('aaa', '111', 3);
        setCookie('bbb', '222');
        setCookie('ccc', '333', 5);

        function getCookie(sName) {
            var str = document.cookie;
            var arr = str.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (arr2[0] == sName) {
                    return arr2[1]
                }
            }
            return ''
        }
        getCookie('aaa');
        function removeCookie(sName) {
            setCookie(sName, 'aa', -1);
        }
        removeCookie('aaa');
        alert(getCookie('aaa'));
    </script>
</head>

<body>
</body>

</html>

Paste_Image.png

如上图所示aaa已经被删掉了，现在看起来是不是感觉简单了好多，以后利用cookie值的时候直接调用封装就可以了。
下面贴一个有关cookie的实例，选项卡的cookie值，在选择一个下标后再次刷新页面会发现还是在那个下标下，下面贴出代码，希望小伙伴们可以敲一下并熟悉。为了能理解清晰就不进行相应封装了，有兴趣的同学可以自己封装一下。
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        input {
            width: 100px;
            height: 50px;
            float: left;
        }
        .clearfix:after{display: block;
        content: '';
        clear: both;}
        .clearfix{
            zoom: 1;
        }
        li {
            width: 300px;
            height: 300px;
            background: #6cf;
            display: none;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            position: absolute;
            top: 50px;
        }
        
        .on {
            display: block;
            background: #6cf;
        }
    </style>
    <script>
        function setCookie(sName, sValue, iDay) {
            if (iDay) {
                var oDate = new Date();
                oDate.setDate(oDate.getDate() + iDay);
                document.cookie = sName + '=' + sValue + '; path=/; expires=' + oDate;
            } else {
                document.cookie = sName + '=' + sValue + '; path=/';

            }
        }

        function getCookie(sName) {
            var str = document.cookie;
            var arr = str.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (arr2[0] == sName) {
                    return arr2[1]
                }
            }
            return ''
        }
        window.onload = function () {
            var aInp = document.getElementsByTagName('input');
            var aLi = document.getElementsByTagName('li');
            var oN=getCookie('xuan');            
           if(oN){
                for(var i=0;i<aInp.length;i++){
                     aInp[i].className='';
                     aLi[i].className='';
                }
                aInp[oN].className='on';
                aLi[oN].className='on';
            }
            for (var i = 0; i < aInp.length; i++) {
                aInp[i].index = i;
                aInp[i].onclick = function () {
                    for (var i = 0; i < aInp.length; i++) {
                        aInp[i].className = '';
                        aLi[i].className = '';
                    }
                    setCookie('xuan',this.index,7);
                    this.className = 'on';
                    aLi[this.index].className = 'on';
                }
            }
        }
    </script>
</head>

<body>
    <input type="button" name="" value="一">
    <input type="button" name="" value="二">
    <input type="button" name="" value="三">
    <ul>
        <li class="on">一</li>
        <li>二</li>
        <li>三</li>
    </ul>
</body>

</html>

上述说了这么多相比大家也觉得cookie有着很多缺点
cookie的缺点：
1、容量小
2、每次向服务器请求的时候，都会向服务器发送cookie（请求的次数越小越好）
3、会过期
4、写起来不方便要封装函数
现在ES6都有了新的方法来代替cookie值，不过并不兼容低级浏览器。新的方法如下：
local Storage 本地存储
1、使用比较方便，不用封装函数
2、有5M
3、不会向服务器发送请求
4、没有过期
session Storage 临时存储
1、使用比较方便，不用封装函数
2、有5M
3、不会向服务器发送请求
二者具体的使用方法如下：

local Storage

使用（简写）：
存：localStorage.name=value
取：localStorage.name
删除： delete localStorage.name
全部删除循环delete
使用（全写）：
存：localStorage.setItem(name.value);
取：localStorage.getItem(name);
删除：localStorage.removeItem(name);
全部删除 localStorage.clear();

session Storage

使用（简写）：
存：sessionStorage.name=value
取：sessionStorage.name
删除： delete sessionStorage.name
全部删除循环delete
使用（全写）：
存：sessionStorage.setItem(name.value);
取：sessionStorage.getItem(name);
删除：sessionStorage.removeItem(name);
全部删除 sessionStorage.clear();
二者区别：大家想必从单词的字面意思也可以看出一个没有过期时间，一个关闭浏览器就过期。虽然以上两者有这巨大的优势但是考虑到低级浏览器cookie的使用也是必不可少的。
以上就是本次的全部内容希望小伙伴们喜欢并提供意见相互交流在此谢谢大家了。同是也希望老司机带我上车带我飞！（手动滑稽）

最后编辑于：2017.12.05 23:54:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,686评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,668评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,160评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,736评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,847评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,043评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,129评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,872评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,318评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,645评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,777评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,861评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,589评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,687评论 2赞 351

有关cookie的知识

定义

local Storage

session Storage

推荐阅读更多精彩内容