cookie 缓存

使用说明

本框架集成了js.cookie.js,不需要再单独引入该文件,直接使用该插件的cookie方法即可。该插件在Github很受欢迎,详见Github,使用格式如下:

                            <script type="text/javascript">
                            Cookies.set('cookieName', 'cookieValue', {
                            expires: 7,
                            path: '/',
                            domian: 'site.com',
                            secure: ture
                            });
                            </script>
                        

一般简写如下:

                            <script type="text/javascript">
                            Cookies.set('cookieName', 'cookieValue', { expires: 7, path: '/' });
                            </script>
                        
  • cookieName是定义cookie名称
  • cookieValue是定义该cookie的值
  • expires是定义cookie的有效期。可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象为Cookie的过期日期。如果指定日期为负数,例如已经过去的日子,那么此Cookie将被删除;如果不设置或者设置为null,那么此Cookie将被当做SessionCookie处理,并在浏览器关闭后删除。
  • path是定义cookie的路径属性。默认是创建该Cookie的页面路径。
  • domian是定义cookie的域名属性。默认是创建该Cookie的页面域名。
  • secure是定义cookie传输方式。默认false,如果设置为true,那么该Cookie的传输会要求一个安全协议,例如HTTPS。

设置cookie

                            <script type="text/javascript">
                            Cookies.set('cookieName', cookieValue', { expires: 7 });
                            </script>
                        

读取cookie

                            <script type="text/javascript">
                            Cookies.get('cookieName');
                            </script>
                        

删除cookie

                            <script type="text/javascript">
                            Cookies.set('cookieName', null);
                            //Cookies.set("cookieName", '', { expires: -1 });设置过去时间也等于删除
                            //Cookies.remove('cookieName', { path: '/' });使用remove方法
                            </script>
                        

实例1:点击按钮设置cookie值

                            <script type="text/javascript">
                            var elem = document.querySelector("#id");
                            var content = document.querySelector("#show");
                            elem.onclick = function(){
                                Cookies.set('cookieName', 'cookieValue', { expires: 7 });
                                content.textContent = Cookies.get('cookieName');
                            };
                            </script>
                        

实例2:点击按钮查看cookie值

                            <script type="text/javascript">
                            var elem = document.querySelector("#id");
                            var content = document.querySelector("#show");
                            elem.onclick = function(){
                                content.textContent = Cookies.get('cookieName');
                            };
                            </script>
                        

实例3:点击按钮清除cookie值

                            <script type="text/javascript">
                            var elem = document.querySelector("#id");
                            elem.onclick = function(){
                                Cookies.remove('cookieName')
                            };
                            </script>
                        

实例4:过期时间定义到分

                            <script type="text/javascript">
                            var expire= new Date();
                            var expiresDate.setTime(expire.getTime() + (60 * 24 * 365));
                            //60 * 24 * 365意思是60分*24*365,也就是说该cookie有效期是一年
                            Cookies.set('cookieName', 'cookieValue', {
                            path : '/',
                            expires : expiresDate
                            });
                            }
                            </script>