cookie - Newbie_小白

javaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie.

假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？

首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

设置cookie：

    function setCookie(name, value) {
        var Days = 30;//Days为cookie过期时间
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }

获取cookie：

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        return (arr = document.cookie.match(reg)) ? unescape(arr[2]) : null;
    }

删除cookie：

  function delCookie(name){
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);//将cookie设置过期即可
        var cval=getCookie(name);
        if(cval!=null)
            document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }

例子演示:

cookieA.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<select name="" id="select">
    <option value="Alice">Alice</option>
    <option value="Dave">Dave</option>
    <option value="Lisa">Lisa</option>
    <option value="Newbie">Newbie</option>
</select>
<ul id="radio">
    <li>
        数据一： <input type="radio" value="数据一" name="val">
    </li>
    <li>
        数据二： <input type="radio" value="数据二" name="val">
    </li>
    <li>
        数据三： <input type="radio" value="数据三" name="val">
    </li>
    <li>
        数据四： <input type="radio" value="数据四" name="val">
    </li>
</ul>
<a href="cookieB.html" onclick="setVal()">跳转到B页面</a>
<script>
    function setVal() {
        delCookie('selected');
        delCookie('radio');
        //select选择框赋值
        var selected = document.getElementById('select').value;
        setCookie('selected', selected);
        //radio单选框赋值
        var eLi=document.getElementById('radio').getElementsByTagName('li');
        for(var i=0;i<eLi.length;i++){
            var radio=eLi[i].getElementsByTagName('input')[0];
           if(radio.checked){
               setCookie('radio', radio.value);
           }
        }
    }
    function setCookie(name, value) {
        var Days = 30;//Days为cookie过期时间
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        return (arr = document.cookie.match(reg)) ? unescape(arr[2]) : null;
    }

    function delCookie(name)
    {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval=getCookie(name);
        if(cval!=null)
            document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
</script>
</body>
</html>

cookieB.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<p>显示A页面select选择框选取的值为 <span id="getSelectVal" style="color: red"></span></p>
<p>显示A页面单选框选取的值为 <span id="getRadioVal" style="color: red"></span></p>
<a href="cookieA.html" >返回A页面</a>
<script>

    var getSelectVal= getCookie('selected');
    document.getElementById('getSelectVal').innerHTML = getSelectVal;

    var getSelectVal= getCookie('radio');
    document.getElementById('getRadioVal').innerHTML = getSelectVal;

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        return (arr = document.cookie.match(reg)) ? unescape(arr[2]) : null;
    }
</script>
</body>
</html>

这是A页面在进入B页面之前的选取情况，点击链接开始赋cookie值

这是进入B页面根据cookie显示的值可以看出，过期时间为我们setCookie里面设置的三十天

posted on 2017-11-30 17:32 Newbie_小白阅读(295) 评论(0) 编辑收藏举报