通过js对cookie的使用手册

一般大多数人还是用引用JQuary API——jquery.cookie.js，来操作cookie。这是一种很不错的方式，我也支持这样的做法。

但是有时候我们只需要一种极为轻量级的代码来实现简单的功能，不想引入Jquery，那么了解一下JS对cookie的操作也是很有必要的。

功能举例：在网站首页加入帮助引导，只需要第一次看见这个页面的用户显示，帮助引导中点击“我知道了”按钮，将永久不再显示。

（由于cookie和浏览器有关，所以在不同的浏览器中，都会显示第一次）

HTML+CSS代码：

<div id="divhelp" style="display:none">
    <div class="container">
        <div id="helpimg">
            <div id="helpimgtext">
                <div>这里可以点击下载“系统说明”获得更多系统帮助哦~</div>
                <div style="text-align:right;font-size:13px; line-height:25px;"><a href="javascript:void(0)">我知道了</a></div>
            </div>
        </div>
    </div>
</div>

#divhelp { background: rgba(0,0,0,0.5); width: 100%; height: 100%; left: 0; top: 0; position: fixed!important; z-index: 1030; cursor:default; }/*bootstrap z-index范围[1030,1040);*/
        #divhelp .container { padding-top: 25px; margin-bottom: 5px; z-index: 1031; position: relative; height: 93px; }
        #divhelp #helpimg { position: absolute; right: 110px; top: 43px; background: url(../背景透明的图片.png); width: 410px; height: 230px; }
            #divhelp #helpimgtext {color:#333; margin:110px 130px 0px 55px;}
            #divhelp #helpimgtext div { line-height:30px; text-indent:2em; }
                #divhelp #helpimgtext a { cursor:pointer; } 

JS代码：

$(function () {
        //alert(document.cookie);

        //cookie存在则不显示
        var cookName = "visited=";
        if (document.cookie.indexOf(cookName) == -1) {
            $("#divhelp").show();
        }

        //点击后储存cookie 
        $("#helpimgtext a").on("click", function () {
            $("#divhelp").hide();
            var date = new Date();
            date.setTime(date.getTime() + 365 * 24 * 3600 * 1000);//失效时长设为1年
            document.cookie = "visited=1;path=/;expires=" + date.toGMTString();
        });
    });

关键代码：

document.cookie = "visited=1;path=/;expires=" + date.toGMTString();

说明：

1）document.cookie

　　设置当前的一条cookie。当alert此代码，将显示所有cookie项，每个cookie之间用;隔开。

2）visited=1

　　visited为键，1为值。格式：键=值。

3）path=/

　　设置共享目录，同一用户的根目录下所有的页面都读取该cookie。简单的说，该cookie在该网站所有页面共享。

4）expires=xxx.toGMTString()

　　设置有效期，xxx必须为日期类型，一旦设置该属性，同一浏览器在该有效期内不会失效。

使用帮助：

Q：如何设置cookie为永久有效？

A：没有永久有效，只有把有效期设置的足够大，比如1年

Q：如何删除cookie？

A：同理，把有效期设置为当前时间-1，即表示过期，过期了就立即失效，消失了。

Q：如何修改cookie？

A：同新增的代码。系统会自动检索该cookie是否存在，没有则新增，有则更新。

Q：如何读取cookie？

A：通过alert(document.cookie)你会发现cookie是一串用;分隔的字符串。只需要用;分隔再循环读取，直到找到你要的值即可。