• JS 浏览器cookie的设置,读取,删除


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

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

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

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

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>关于Cookie</title>
    <script>
    /*
    cookie:存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据;
    1、不同的浏览器存放的cookie位置不一样,也是不能通用的;
    2、cookie的存储是以域名的方式进行区分的;
    3、cookie的数据是可以设置名字的,j.name=Jack
    4、一个域名下存放的cookie的个数是有限制的,不同浏览器存放的个数不一样;
    5、每个cookie存放的内容大小也是限制的,不同的浏览器存放大小限制不一样;

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

    我们想长时间存放一个cookie,需要在设置这个cookie的时候必须设置一个过期时间;
    document.cookie='名称=值;expires='+(字符串格式的)时间;
    cookie默认是临时存储,当浏览器关闭进程的时候,自动销毁;

    */

    //document.cookie='名字=值';
    //document.cookie='name=Jack';
    //document.cookie='pwd=123456';

    //设置一个过期时间
    //var oDate=new Date();
    //oDate.setDate(oDate.getDate()+7);//设置为当前时间起算7天后过期
    //document.cookie='name=Jack;expires='+oDate.toGMTString();
    //alert(typeof oDate);//odate类型是object类型,需要转换为字符串;
    //alert(oDate.getDate()); //获取的是当前月份的日号,如5月25,输出的是25

    //读取cookie:document.cookie;
    //alert(document.cookie);//name=Jack; pwd=123456

    //内容最好编码存放,编码--encodeURI(),解码--decodeURI()
    //document.cookie='name='+encodeURI('Jack 您好')+';expires='+oDate.toGMTString();//name=Jack%0A%E6%82%A8%E5%A5%BD; pwd=123456
    //alert(decodeURI(document.cookie));//name=Jack 您好; pwd=123456
    setCookie("name","Tom",5);
    alert( getCookie("name"));
    removeCookie("name");
    /*
    封装
    */

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

    }
    function getCookie(key){
    var arr1=document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的,所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型;
    for(var i=0;i<arr1.length;i++){
    var arr2=arr1[i].split("=");//通过=截断,把name=Jack截断成[name,Jack]数组;
    if(arr2[0]==key){
    return decodeURI(arr2[1]);
    }
    }

    }
    //封装一个移除cookie的函数
    function removeCookie(key){
    setCookie(key,"",-1);//把cookie设置为过期

    }
    </script>
    </head>

    <body>
    </body>
    </html>

    例子: 

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>记住cookie效果</title>
    <script>
    /*
    封装*/
    window.onload=function(){

    var oName=document.getElementById("username");
    var oBtn=document.getElementById("btn");
    var oDel=document.getElementById("del");

    //判断当前cookie是否有值,---即判断getCookie()函数的返回值是否有
    if(getCookie("Username")){
    oName.value=getCookie("Username");
    }else{
    oName.value="请输入账户名";
    }

    oBtn.onclick=function(){
    alert("登录成功");
    setCookie("Username",oName.value,5);
    }

    oDel.onclick=function(){
    removeCookie("Username");
    oName.value="";
    }
    }

    function setCookie(key,value,t)
    { if(t>0){
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+t);
    document.cookie=key+"="+value+"; expires="+oDate.toDateString();
    }
    }

    function getCookie(key){
    var arr1=document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的,所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型;
    for(var i=0;i<arr1.length;i++){
    var arr2=arr1[i].split("=");//通过=截断,把name=Jack截断成[name,Jack]数组;
    if(arr2[0]==key){
    return decodeURI(arr2[1]);
    }
    }
    }

    //封装一个移除cookie的函数
    function removeCookie(key){
    setCookie(key,"",-1);//把cookie设置为过期

    }


    // removeCookie("name");


    </script>
    </head>

    <body>
    <input type="text" id="username">
    <input type="button" value="登录" id="btn">
    <input type="button" value="清除cookie" id="del">
    </body>
    </html>

  • 相关阅读:
    IE6不支持hover赋予css样式的解决方法 如div:hover li:hover支持
    导航条
    check的css样式
    css3网站
    时间轴滚动充盈
    html5网站
    图片查看插件
    响应式列表中控制图片高度一致js
    json数组按xxx属性值排序 升序
    H5响应式方案
  • 原文地址:https://www.cnblogs.com/cristina-guan/p/6904099.html
Copyright © 2020-2023  润新知