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. curl测试puppet http api接口

    ---恢复内容开始--- 基于证书密钥对 curl --cert /etc/puppetlabs/puppet/ssl/certs/master.puppet.org.pem --key /etc/p ...

  2. flashback drop（2015-2-3学习日记）

    知识面是由知识点组成的,你在研究某一个知识点的时候常常会遇到另一个知识点,然后你去研究那个知识点,又会带出更多的知识点,最终组成了知识面. 今天在看书的时候看到一个删除表的语句: DROP TABLE ...

  3. MSSQLSERVER数据库- 打开表出现目录名无效

    打开SQLSERVER数据库,出现目录名无效,如下图: 解决方法到 临时目录:C:\Documents and Settings\Administrator\Local Settings\Temp 手 ...

  4. 【JAVA - SSM】之MyBatis插入数据后获取自增主键

    很多时候,我们都需要在插入一条数据后回过头来获取到这条数据在数据表中的自增主键,便于后续操作.针对这个问题,有两种解决方案: (1)先插入,后查询.我们可以先插入一条数据,然后根据插入的数据的各个字段 ...

  5. 【转】java.lang.StackOverflowError

    http://blog.csdn.net/g19920917/article/details/8765638 出现一个java.lang.StackOverflowError异常.弄了半天,又是问高手 ...

  6. chromium截图实现

    声明:本blog是我自己写的,假设要转载,请注明:come from blog of niba! chromium终于显示是在ContentView上.但通过硬件加速.渲染合成的网页之前是在surfa ...

  7. Material Design之TextInputLayout、Snackbar的使用

    这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下. TextInputLayout Text ...

  8. typename使用在模板中区分static成员和类型

    16.19 编写函数,接受一个容器的引用,打印容器中的元素,使用容器的size_type和size成员来控制打印元素的循环. 16.20 重写上一题的函数,使用begin和end返回的迭代器来控制循环 ...

  9. 隐藏TabBar是个累人的活

    最近进行跳转界面隐藏tabbar的时候遇到了一些坑,现在把它记录下来,如果有需要的朋友可以参考一下. 大家一般使用tabbar的时候,隐藏有两种方法. 一种是设置当前所处界面的隐藏属性 self.ta ...

  10. Ⅰ.AngularJS的点点滴滴--引导

    AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 页面引导实例化 1.自动实例化 <html> <script ...