cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据
1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来

如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

//document.cookie = '名字=值';

//document.cookie = '名称=值;expires=' + 字符串格式的时间;

function setCookie(key, value, t) {
    var oDate = new Date();
    oDate.setDate( oDate.getDate() + t );
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

function getCookie(key) {
    var arr1 = document.cookie.split('; ');
    for (var i=0; i<arr1.length; i++) {
        var arr2 = arr1[i].split('=');
        if ( arr2[0] == key ) {
            return decodeURI(arr2[1]);
        }
    }
}

function removeCookie(key) {
    setCookie(key, '', -1);
}

setCookie('sex','男', 10);
alert( getCookie('age') );
removeCookie('username');

 

jquery.cookie.js  https://github.com/carhartl/jquery-cookie#readme

cookie的应用-网页换肤

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
    <!--   引入jQuery -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <!--   引入jQuery的cookie插件 -->
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            var $li =$("#skin li");
            $li.click(function(){
                switchSkin( this.id );
            });
            var cookie_skin = $.cookie( "MyCssSkin");
            if (cookie_skin) {
                switchSkin( cookie_skin );
            }
        });
        function switchSkin(skinName){
                 $("#"+skinName).addClass("selected")                 //当前<li>元素选中
                                .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
                $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
                $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
        }
        //]]>
    </script>
</head>
<body>
    <ul id="skin">
        <li id="skin_0" title="灰色" class="selected">灰色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="红色">红色</li>
        <li id="skin_3" title="天蓝色">天蓝色</li>
        <li id="skin_4" title="橙色">橙色</li>
        <li id="skin_5" title="淡绿色">淡绿色</li>
    </ul>

    <div id="div_side_0">
        <div id="news">
            <h1 class="title">时事新闻</h1>
        </div>
    </div>

    <div id="div_side_1">
        <div id="game">
            <h1 class="title">娱乐新闻</h1>
        </div>
    </div>

</body>
</html>

cookie : 存储数据的更多相关文章

  1. javascript之存储数据-cookie，localStorage，sessionStorage

    cookie: 存储一些简单的数据,以文本形式放到本地,大小4kb 存储:document.cookie='name=value' 取值:document.cookie(字符串) 期限:expires ...

  2. js读写Cookie问题（Cookie存储时长、Cookie存储域）汇总

    在采集网站用户行为数据/使用js对用户行为做交互时,经常会使用到Cookie,了解Js Cookie的读写,以及一些细节,非常重要.   什么是Cookie 所谓Cookie,只是一条极为短小的信息, ...

  3. js基础---cookie存储

    一.Cookie是什么Cookie是一种客户端(浏览器)把用户信息以文件形式存储到本地硬盘的技术,说白了就是一种浏览器技术 二.Cookie的作用Cookie的作用很单一,就是存储客户数据.(存储数据 ...

  4. HTML5 客户端存储数据的两种方式

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  5. .net core2.0下使用Identity改用dapper存储数据

    前言. 已经好多天没写博客了,鉴于空闲无聊之时又兴起想写写博客,也当是给自己做个笔记.过了这么些天,我的文笔还是依然那么烂就请多多谅解了.今天主要是分享一下在使用.net core2.0下的实际遇到的 ...

  6. cookie存储

    cookie就是用来存储数据的 cookie先分装函数 这是用来存数据的函数 function setCookie(name,value,iDay){ if(iDay){ var oDate = ne ...

  7. PHP中的会话控制—session和cookie(实现数据传值功能)

    1.session  登录上一个页面以后,长时间没有操作,刷新页面以后需要重新登录. 特点:(1)session是存储在服务器:   (2)session每个人(登陆者)存一份: (3)session ...

  8. HTML5中两种方法实现客户端存储数据

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  9. 手把手教你开发Chrome扩展三：关于本地存储数据

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...

随机推荐

  1. 使用pupperlabs yum repo

    http://docs.puppetlabs.com/guides/puppetlabs_package_repositories.html

  2. Struct2 拦截器

    拦截器的整个过程 程序是在执行Action之前调用的拦截器,整个过程是这样子的 这里面注意两个问题: public void serviceAction(HttpServletRequest requ ...

  3. 一步一步制作yaffs/yaffs2根文件系统(七)---真挚地道歉以及纠正前边出现的错误！

    接上一节http://blog.csdn.net/mybelief321/article/details/10040939 说实话,我当时写这个系列的博文的时候,感觉对BusyBox算是有点了解,直到 ...

  4. web前端开源小案例:立方体旋转

    HTML部分: <body class="body"> <div class="rect-wrap">   <!-- //舞台元素 ...

  5. eclipse+tomcat+httpServlet初学

    1.在eclipse中配置tomcat,参考上一边文章,建立的web项目tomcatWeb目录结构 2.添加Servlet处理类 3. 实现doGet()与doPost()方法: <span s ...

  6. Rsync同步工具安装文档

    (1)下载Rsync源代码进行安装 (2)1'   cd rsync 2'   ./configure   --prefix=/usr/local/rsync 3'   make 4'   make  ...

  7. 《Pro Android Graphics》读书笔记之第四节

    Android Procedural Animation: : XML, Concepts and Optimization Procedural Animation Concepts: Tweens ...

  8. Oracle 数据库用户管理

    Oracle 数据库用户管理 Oracle 权限设置      一.权限分类: 系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限 ...

  9. Kia&#39;s Calculation（贪心）

    pid=4726">http://acm.hdu.edu.cn/showproblem.php? pid=4726 大致题意:给两个长度小于10^6且相等的合法的正整数.你能够随意组合 ...

  10. delegate和event

    经过查阅资料和自己的理解整理出来的,欢迎大家指教. delegate和event 何时使用: 异步的时候,比如加载完成通知. 需要回调的时候,比如按钮点击.动画播放结束等. 发送事件通知的时候. 比如 ...