分类 front-end 下的文章

来自Cookie和Session的区别总结

二者作用:解决HTTP协议无状态的缺陷,在客户端/服务器端保存会话状态。

创建Session过程:

检查客户端请求中是否包含一个session标识(session id)
若包含,则说明之前已经为此客户端创建过session。服务器按照此session id检索出session
若不包含,则为此客户端创建一个session,并生成一个session id。此session id将作为响应返回给客户端保存。(使用Cookie保存)

若Cookie被禁止,必须有其他机制能够把session id回传给服务器
回传session id至服务器:

URL重写:把session id直接附加在URL路径后面
隐藏表单字段

Cookie和Session的区别:

Cookie中只能保存ASCII字符串,Session中可以保存任意类型的数据,甚至Java Bean乃至任何Java类、对象等
隐私策略不同 Cookie存储在客户端,对客户端是可见的,可被客户端窥探、复制、修改。而Session存储在服务器上,不存在敏感信息泄露的风险
有效期不同 Cookie的过期时间可以被设置很长。Session依赖于名为JSESSIONI的Cookie,其过期时间默认为-1,只要关闭了浏览器窗口,该Session就会过期,因此Session不能完成信息永久有效。如果Session的超时时间过长,服务器累计的Session就会越多,越容易导致内存溢出。
服务器压力不同 每个用户都会产生一个session,如果并发访问的用户过多,就会产生非常多的session,耗费大量的内存。因此,诸如Google、Baidu这样的网站,不太可能运用Session来追踪客户会话。
浏览器支持不同 Cookie运行在浏览器端,若浏览器不支持Cookie,需要运用Session和URL地址重写。
跨域支持不同 Cookie支持跨域访问(设置domain属性实现跨子域),Session不支持跨域访问
参考:理解Cookie和Session机制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>js出现次数最多的是</title>
    <link rel="stylesheet" href="">
    <script>
        var str='asdhdsaaaadasds';
        var json={};

        for (var i = 0; i < str.length; i++) {
                if(!json[str.charAt(i)]){
                        json[str.charAt(i)] = 1;
                }else{
                        json[str.charAt(i)]++;
                }
        };
        var iMax = 0;
        var iIndex = '';
        for(var i in json){
                if(json[i]>iMax){
                        iMax = json[i];
                        iIndex = i;
                }
        }
        alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
    </script>
</head>
<body>
    asdhdsaaaadasds
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        <!--
        .thumbnail{ position:relative; z-index:0; }
        .thumbnail:hover{ background-color:transparent; z-index:50; }
        .thumbnail span{ position:absolute; background-color:#FFFFE0; left:-1000px;border:1px dashed gray; visibility:hidden; color:#000; text-decoration:none; padding:5px; }
        .thumbnail span img{ border-width:0; padding:2px; }
        .thumbnail:hover span{ visibility:visible; top:10px; left:50px; }
        p{ margin-top:200px; }
    -->
</style>
</head>
<body>
    <a class="thumbnail" href="#">
        <img src="" width="50" height="50"><br>
        <span><img src="" width="250" height="250"></span>
    </a>
</body>
</html>

在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链.

Math对象中所有的属性和方法都是静态的,没有构造函数,所以不能用Math()来定义一个Math对象,可以直接使用Math对象提供的属性和方法

Math对象的属性

属性名说明
constructor对创建此对象的函数的引用
E自然对数的底数,常数e,其值近似为2.718
LN1010的自然对数,其值近似为2.302
LN22的自然对数,其值近似为0.693
LOG10E以10为底的e的对数,其值近似为0.434
LOG2E以2为底的对数,其值近似为1.442
PI常量π,其值近似为3.141159
prototype向对象添加自定义的属性和方法
SQRT1_21c除以2的平方根,其值近似为0.707
SQRT22的平方根,其值其值近似为1.414

Math对象的方法

方法名说明
abs()返回x的绝对值
acos(x)返回x的反余弦值,参数x的有效值范围为-1.0~1.0。如果超过该范围则返回NaN
asin(x)返回x的反正弦值,参数x的有效值范围为-1.0~1.0。如果超过该范围则返回NaN,否则返回-π/2~π/2之间的弧度值
atan(x)返回x反正切值。返回值为-π/2~π/2之间的弧度值
atan2(y,x)返回从一个点(x,y)与X轴之间的角度,参数x和y分别为X坐标和Y坐标,返回值为-π~π之间的值
ceil(x)向上舍入,即返回大于或等于x并且与x最接近的整数
cos(x)返回x的余弦值。返回值为-1.0~1.0之间的值
exp(x)返回ex,其中e为自然对数的底数
floor(x)向上舍入,即返回小于或等于x并且与x最接近的整数
log(x)返回x的自然对数。参数x为大于0的书,如果x为负数,则返回NAN
max(value1,value2...)返回参数中最大的值,如果没有参数,返回-Infinity。如果有一个参数为NaN,或有一个不能转换成数字的参数,返回NAN
min(value1,value2...)返回参数中最小的值,如果没有参数,返回-Infinity。如果有一个参数为NaN,或有一个不能转换成数字的参数,返回NAN
pow(x,y)返回xy,如果xy的结果虚数或复数,Math.pow()将返回NaN,如果xy的结果过大,可能会返回Infinity
random()返回一个0~1之间的随机数
round(x)舍入到最近的整数,返回与x最近的整数
sin(x)返回x的正弦值。返回值为-1.0~10的值
sqrt(x)返回x的平方根。如果x为负数,返回NaN
tan(x)返回x的正切值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数组元素排列</title>
    <link rel="stylesheet" href="">
    <script>
    //定义用于升序排列的函数
    function asc(x,y){
        if(x>y){
            return 1;
        }
        else if(x<y){
            return -1;
        }
        else{
            return 0;
        }
    }
    //定义用于降序排列的函数
    function desc(x,y){
        if(x>y){
            return -1;
        }
        else if(x<y){
            return 1;
        }
        else{
            return 0;
        }
    }
    //定义一个数组
    var arr=new Array(5,29,14,656,206,41,3,159);
    document.write("原数组中的元素为:"+arr.toString()+"<br>");
    //将数组元素升序排列
    arr.sort(asc);
    document.write("数组元素升序排列后为:"+arr.toString()+"<br>");
    ////将数组元素降序排列
    arr.sort(desc);
    document.write("数组元素降序排列后为:"+arr.toString()+"<br>");
    </script>
</head>
<body>
    
</body>
</html>

Array是一个有序的数据集合
在JavaScript中定义数组的方法有三种
1.使用数组直接量来定义
2.使用数组对象的Array()来构造函数来定义
3.使用其他对象中的方法,如使用String对象中的split()方法来返回一个数组

1.使用数组直接量
数组名=[element1,element2,element3,...]

2.使用构造函数
数组名=new Array();
数组名=new Array(length);
数组名=new Array(element1,element2,element3,...);
数组名=Array();
数组名=Array(length);
数组名=Array(element1,element2,element3,...);

3.使用String对象的split()方法
String对象的split()方法可以将一个字符串分隔成一个数组
StringObj.split(separator.limit)
StringObj是String的对象,separator是字符串或正则表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Match的对象实例</title>
    <link rel="stylesheet" href="">
    <script>
    var m=parseInt(prompt("请输入随机数的下限","0"));
    var n=parseInt(prompt("请输入随机数的上限","0"));
    with(document){
        //Math的属性和方法
        write("Math.E="+Math.E+"<br>");
        write("Math.LN2="+Math.LN2+"<br>");
        write("Math.LN10="+Math.LN10+"<br>");
        write("Math.LOG2E="+Math.LOG2E+"<br>");
        write("Math.LOG10E="+Math.LOG10E+"<br>");
        write("Math.PI="+Math.PI+"<br>");
        write("Math.SQRT1_2="+Math.SQRT1_2+"<br>");
        write("Math.SQRT2="+Math.SQRT2+"<hr>");
        //使用log方法计算自然数
        write("Math.log("+n+"):"+Math.log(n)+"<br>");
        write("Math.log("+m+"):"+Math.log(m)+"<br>");
        write("Math.log(Math.exp("+m+")):"+Math.log(Math.exp(m))+"<hr>");
        //使用sqrt方法计算平方根
        write("Math.sqrt("+m+"):"+Math.sqrt(m)+"<br>");
        write("Math.sqrt("+n+"):"+Math.sqrt(n)+"<hr>");
        //在for循环中使用random方法产生10个随机数
        document.write(m+"到"+n+"之间的随机数为:<br>");
        for(var i=0;i<10;i++){
            var reasult=Math.round(Math.random()*(n-m)+m);
            document.write(reasult+",");
        }
    }
    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>String的属性和方法</title>
    <link rel="stylesheet" href="">
    <script>

    </script>
</head>
<body>
    Strin定义字符串有两种方法
    1.使用new语句通过调用字符串对象的构造函数定义一个字符串对象
    2.使用var语句定义一个字符串变量,而这个字符串变量可以直接使用字符串的方法个属性
    String对象的属性和方法
    String属性有三个:length,constructor,prototype
    <code>
        var s=0;
        var newString=new String("teacher");
        var s=newString.length;
        alert(s.toString(16));
    </code>
    <code>
        var newName=new String("Hello");
        if(newName.constructor==String);{
        alert("It is a String");
        }
    </code>    
    <code>
        function employee(name,age){
        this.name=name;
        this.age=age;
        }
        var info=new employee("kate",35);
        employee.prototype.saylary(null);
        info.salary=600;
        alert(info.salary);
    </code>
    
</body>
</html>