JS中Cookie详解及示例展示

最新推荐文章于 2024-10-05 07:56:51 发布

csdn_JAVA_HL

最新推荐文章于 2024-10-05 07:56:51 发布

阅读量1w

点赞数 3

分类专栏： JS HTML5 文章标签： cookie javascript html

本文链接：https://blog.csdn.net/update_java/article/details/47396811

版权

JS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 1 订阅

订阅专栏

Cookie的作用

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。
（2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了
cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。
（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

Cookie保存的格式及其属性介绍

在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用encodeURI()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储到cookie的值中，而且使用此种方案还可以避免中文乱码的出现。在获取cookie时可以通过decodeURI()方法对cookie进行解码，然后获取其值。

Cookie的保存格式为(每个属性之间通过：’分号+空格’(; )隔开;)：document.cookie=”name=value; expires=evalue; path=pvalue; domain=dvalue; secure=svalue;”
Cookie 参数值的意思:
name:表示要存入对象的名称，唯一必须设置的参数（通常使用：user@domain格式命名，user为本地用户，domain为所访问网站的域名）。value：表示要存入得值。
expires：该对象的有效时间（可选）（默认为当前浏览器会话有用，关闭浏览器就消失）;
path:指定该Cookie作用范围（可选）(即：在那些网页上有效，默认情况下对于当前网页所在的同一目录下的所有页面有效)；
domain:设置web服务器的Cookie共享域（可选）(如：test*.com)表示域名为test*.com的服务器共享该Cookie
secure：设置Cookie的传输过程是否加密（可选）（一般为SSH加密）
Cookie的保存、获取、删除的方法

保存Cookie：直接通过document.cookie=”str”;即可保存cookie对象参考下方示例的setCookie()方法；

获取Cookie：获取浏览器中的Cookie时，只能够一次获取所有的cookie值，而不能指定cookie名称来获得指定的值，这正是处理cookie值最麻烦的一部分。用户必须自己分析这个字符串，来获取指定的cookie值。参考示例中的getCookie(cName)方法；

删除Cookie：删除Cookie就是简单的将cookie的expires属性设置为一个过去的时间即可；

JS对Cookie存取及删除操作示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js中cookie操作</title>

<script type="text/javascript">
    //保存表单中的信息到Cookie中
    function saveCookie(){
        var userName = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        console.log(userName+password);
        var date = new Date();
    //  date.setDate(date.getDate()+1);
        date.setTime(date.getTime()+5000);
        //将cookie保存5秒钟
        setCookie("userName",userName,date.toGMTString(),"","","");
        setCookie("password",password,date.toGMTString(),"","","");
        showCookie()
        }

    //设置Cookie
    /*
    在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何
    来存储这些值呢？方法是用encodeURI()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于
    cookie值中，而且使用此种方案还可以避免中文乱码的出现。在获取cookie时可以通过decodeURI()方法对cookie进行解码。

    Cookie的保存格式为："name=value; expires=evalue; path=pvalue;"
    每个属性之间通过：'分号+空格'(; )隔开;

    参数值的意思:
    name:表示要存入对象的名称，唯一必须设置（通常使用：user@domain格式命名，user为本地用户，domain为所访问网站的域名）。value：表示要存入得值。
    expires：该对象的有效时间（可选）（默认为当前浏览器会话有用，关闭浏览器就消失）;
    path:指定该Cookie作用范围（可选）(即：在那些网页上可用)；
    domain:设置web服务器的Cookie共享域（可选）(如：test*.com)表示域名为test*.com的服务器共享该Cookie
    secure：设置Cookie的传输过程是否加密（可选）（一般为SSH加密）
    */
    function setCookie(name,value,expires,path,domain,secure){
        document.cookie=name+"="+encodeURI(value)+
        ((expires) ? "; expires=" + expires : "")+
        ((path) ? "; path=" + path : "")+
        ((domain) ? "; domain=" + domain : "")+
        ((secure) ? "; secure=" + secure : "");
        }
    /**
        获取浏览器中的Cookie时，只能够一次获取所有的cookie值，而不能指定cookie名称来获得指定的值，这正是处理cookie值最麻 烦的一部分。
        用户必须自己分析这个字符串，来获取指定的cookie值
    **/
        //获取浏览器中的Cookie
    function getCookie(cName){
        var cookieString = decodeURI(document.cookie);
        var cookieArray = cookieString.split("; ");
        console.log(cookieArray.length);
        for(var i = 0; i < cookieArray.length; i++){
            var cookieNum = cookieArray[i].split("=");
            console.log(cookieNum.toString());
            var cookieName = cookieNum[0];
            var cookieValue = cookieNum[1];

            if(cookieName == cName){
                return cookieValue;
                }
            }
        return false;
        }
        function showCookie(){
            var txt =  document.getElementById("txt_showCookie");
            txt.value = "用户名："+getCookie("userName")+"\n密码："+getCookie("password");
        }

        //删除Cookie就是简单的将cookie的expires属性设置为一个过去的时间即可。
        function deleteCookie(){
            var date = new Date();
            date.setTime(date.getTime()-1000);
            setCookie("userName",password,date.toGMTString(),"","","");
            setCookie("password",password,date.toGMTString(),"","","");
            showCookie();
            }
</script>

</head>
<body onLoad="showCookie()">
<from>
    <input type="text" id="username" name="username" placeholder="用回名"/><br/>
    <input type="password" id="password" name="password" placeholder="密码"><br/>
    <input type="button" onClick="saveCookie()" value="保存cookie" />
    <input type="button" onClick="deleteCookie()" value="删除cookie"/>
<br/>
<label>cookie显示区域</label><br/>
<textarea id="txt_showCookie" placeholder="cookie显示区域" rows="6" cols="30">

</textarea>
</from>
</body>
</html>

运行截图：
这里写图片描述

注：
- 由于google浏览器禁用了本地网页的cookie操作，只能通过在线方式操作本地的cookie,故该实例在google浏览器上测试是不起作用的。
- 火狐浏览器支持本地网页的cookie操作，该实例可以放在FF浏览器上测试。

知识扩展

HTML5中提供了更加强大的本地储存解决方案（sessionStorage、localStorage、Web SQL Database）可储存的数据结构更加复杂，数据量更大，有兴趣者可参考http://blog.csdn.net/update_java/article/details/47274161