【JQ成长笔记】jQuery cookie的使用

jquery cookie挺好用的。简单实在。菜鸟都能用得上。。额。文笔不好不好。。咳咳。。

先来看看jq.cookie的aip

写入cookie

$.cookie("this-cookie","this-value",{
    expires:10,//有效日期
    path:"/",//cookie的路 径
    domanin:    //cookie的域名
    secure:true //true,cookie的传输会要求一个安全协议,否则反之

});

读取cookie

$.cookie("this-cookie")

删除cookie

$.cookie("this-cookie",null)

...

是不是很简单呢,这样子就可以完成cookie 下面看一个demo例子

$(function(){
            $("ul li").click(function(){
                $("#"+this.id).addClass("cur").siblings().removeClass("cur"); //切换选中后的样式
                $("#colortable").attr("href",this.id+".css");//每次切换更换相对应的样式表
                $.cookie("cookie",//写入cookie
                        this.id,//需要cookie写入的业务
                        {
                        "path":"/", //cookie的默认属性
                        "expires":10 //有效天数
                })
            });
            var cookie=$.cookie("cookie"); //读取cookie
            if(cookie){
                    $("#"+cookie).addClass("cur").siblings().removeClass("cur");
                    $("#colortable").attr("href",cookie+".css");
                    $.cookie("cookie",cookie,{
                        "path":"/",
                        "expires":10
                    })
                }
        })

html:

<li id="colour_1">红色</li>
<li id="colour_2">黑色</li>

一个简单的换肤效果就出来了

如果用谷歌浏览器打开 记得要在服务器端哦。。

上面这个demo要注意的地方有:

被点击的盒子。class或者id等 跟对应的样式表名字一样。

这样就完成了拉。。

整理后的代码

$(function(){
            $("ul li").click(function(){
                Mycookie(this.id)
            });
            var cookie=$.cookie("cookie"); //读取cookie
            if(cookie){
                Mycookie(cookie);
            }
        })
        function Mycookie(thiscookie){
            $("#"+thiscookie).addClass("cur").siblings().removeClass("cur");
            $("#colortable").attr("href",thiscookie+".css");
            $.cookie("cookie",thiscookie,{
                "path":"/",
                "expires":10
            })
        }
时间: 2024-10-31 09:59:15

【JQ成长笔记】jQuery cookie的使用的相关文章

【JQ成长笔记】jQuery Validate验证插件

validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 需要引入的js 1 <script type="text/javascript" src="../../scripts/jquery-1.3.1.js&qu

【JQ成长笔记】关于$(this).index与$.each的使用

本人菜鸟入门,小庙容不下大神的 O(∩_∩)O~~轻喷~ 工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX) 1 $(function(){ 2 $(".bao").hide(); 3 $(".bao").eq(0).show(); 4 $(".head li").click(function(){ 5 $(this).addClass('cu

【jq】插件—缓存jquery.cookie.js

jquery.cookie.js插件   轻量级cookie管理 1°下载地址:http://plugins.jquery.com/cookie/ 2°引入方式:(基于jquery) <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jque

jquery.cookie.js使用

1.下载jquery.cookie.js 官网:http://plugins.jquery.com/cookie/ 或 http://pan.baidu.com/s/1mgynA8g 2.使用方法 复制代码 $.cookie('the_cookie'); // 获得cookie $.cookie('the_cookie', 'the_value'); // 设置cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jquery cookie的用法

jQuery cookie是个很好的cookie插件,大概的使用方法如下example $.cookie(’name’, ‘value’);设置cookie的值,把name变量的值设为valueexample $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});新建一个cookie 包括有效期 路径 域名等example $.cookie(’name’, ‘value’);新

一个怂女婿的成长笔记【十五】

2014-08-16 大部分人不是没有选择生活方式的权利,而是没有勇气去做出改变罢了. 我们经常在抱怨现在的生活不是自己想要的,但是当我们自问什么生活才是自己想要的时候,我们又偏偏答不出来,或者觉得太虚幻.所以,我们经常抱怨上天,抱怨公司,抱怨体制的时候,有没有想过,不是我们改变不了现在的生活,而是我们没有勇气去改变,而找了一些借口罢了. 记得一年前,我看过一篇<降级论>的文章,作者之前也是一名程序员,后来选择了其他行业,过上了自己想要的生活.但是我这里的意思不是觉得程序员的职业不好,或者没前

一个怂女婿的成长笔记【十二】

2013-05-27 年轻时有梦想,等我们老了,才有回忆. 最近一直在聊一些和"努力工作"完全对立的东西,上周末回了老婆娘家,又和岳父聊了一下以后的打算.虽然岳父是一个生意人,但是当我在提到不要把大心思花在正职工作上的时候,他虽然同意人要多为自己留点后路的观点,但是他说在正职工作上应该为老板创造多于自己薪水的价值,比如老板给你5000块,你起码要做到7000块的水平.虽然我不愿意做到这样,但是这本来就是一个互相利用的关系,你有被老板利用的价值,才能保证在你想出来单干之前不丢饭碗. 怂女

Android菜鸟的成长笔记(28)——Google官方对Andoird 2.x提供的ActionBar支持

在Google官方Android设计指南中(链接:http://www.apkbus.com/design/get-started/ui-overview.html)有一个新特性就是自我标识,也就是宣传自己,所以很多应用现在也自然的使用ActionBar并提供自己的logo. 微信的应用: Google的Android设计指南中是这样说的:应用的 启动图标 作为启动应用的入口是展示 logo 的最佳场所.你也可以将启动图标放置在 操作栏 上,从而保证在应用内的所有页面上都能看到它. 在使用Act