一、session与cookie区别
session存储在服务端,
session会在一定时间内保存在服务器上,当访问增多,会比较站服务器性能,考虑性能方面,应当用cookie
session是服务端技术,服务器在运行的时候可以为每个用户的浏览器创建一个独享的session对象,
由于session为用户浏览器独享,所以用户在访问服务器的web资源时,可以把各自的数据放在各自的session中,当用户再去访问服务器中的其它web资源时,其它web资源再从用户各自的session中取出数据为用户服务。
cookie存储在客户端,
别人可以分析存储在本地的cookie并进行cookie欺骗,考虑安全问题应当用session
单个cookie保存数据不超过4k,很多浏览器限制一个站点最多保存20个cookie
cookie是客户端技术,程序把用户的信息以cookie的形式存储在用户各自的浏览器。当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据去。这样,web资源处理的就是用户各自的数据了。
如不设置cookie的过期时间,则表示cookie的生命周期为浏览器的会话期间,关闭浏览器窗口,cookie就消失。
会话cookie存储在内存里,如设置了过期时间,浏览器会把cookie存在硬盘上,存在硬盘上的cookie可以在不同浏览器进程之间共享。
*HTML5Web存储
html5提供两种在客户端存储数据的方法:
localStorage-没有时间限制的数据存储
sessionStorage-针对一个session的数据存储
之前这些都是有cookie完成。但是cookie不适合大量数据的存储,因为他们由每个对服务器的请求来传递,这使得cookie速度慢且效率也不高
在html5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使得在不影响网站性能的情况下存储大量数据成为可能
eg:localStorage方法存储的数据没有时间限制。第二天、第二周或下一年,数据依然可用
统计页面访问次数
<script>
if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount)+1;
}else{
localStorage.pagecount=1;
}
document.write("Visits"+localStorage.pagecount+"times");
</script>
sessionStorage方法针对一个sessionStorage进行数据存储。当用户关闭浏览器窗口后,数据会被删除
eg下面的例子对用户在当前session中访问页面的次数进行计数:
<script>
if(sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}else{
sesssionStorage.pagecount=1;
}
document.write("Visits"+sessionStorage.pagecount+"times this session");
</script>
清空storage
- localStorage.clear();*
localStorage的优势与局限
优势:
1.扩展了cookie的4k限制;
2.可以将第一次请求的数据直接存储在本地,相当于一个5M大小的针对前端页面的数据库,相比于cooki可以节约带宽(但却只有高版本的浏览器才支持);
局限:
1.浏览器的大小不统一,并且在IE8以上的浏览器才支持这个属性;
2.目前所有的浏览器都会把localStorage的值类型限定为string类型,比较常见的json对象类型需要一些转换(可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串);
3.在浏览器的私密模式下是不可读取的(读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法);
4.其本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,导致页面变卡;
5.不能被爬虫抓取到;
localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,二sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
localStorage的写入有三种(三种读取):
var storage = window.localStorage;
// 三种写入
storage["a"]=1; // 写入a字段
storage.b=1; // 写入b字段
storage.setItem("c",3); // 写入c字段
console.log(typeof storage["a"]); // string
console.log(typeof storage["b"]); // string
console.log(typeof storage["c"]); // string
// 三种读取
var a = storage.a; //第一种读取
var b = storage["b"]; //第二种读取
var c = storage.getItem("c"); //第三种读取
// **修改storage的值 **
storage.a=4;
console.log(storage.a); // 4
注:通过getItem或者使用storage["key"]获取到的信息均为实际存储的副本
*eg:
storage.key={value1:"value1"};
storage.key.value1="a";
这里是无法对实际存储的值产生作用的,这种写法也不可以:storage.getItem("key").value1="a";
// 删除storage
storage.removeItem("key");//删除名称为“key”的信息。
storage.clear();//清空localStorage中所有信息
console.log(storage.a); // undefined
// localStorage的键获取
for(var i=0;i<storage.lenght;i++){
var key = storage.key(i);
console.log(key);
}
使用key()方法,向其中出入索引即可获取对应的键
注:localStorage的使用遵循同源策略,所以不同的网站直接是不能共用相同的localStorage
二、js判断用户的浏览器设备是移动端还是pc端
<script type="text/javascript">
# function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
document.writeln("您的浏览设备为:");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
document.writeln("phone");
} else {
document.writeln("pc");
}
}
browserRedirect();
</script>
三. 判断是否微信浏览器中打开
<script type="text/javascript">
#function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
四. 前后端交互协议
restful协议
五. 常见浏览器兼容问题
1).不同浏览器的标签默认的margin和padding不同,所以设置margin,padding 为0;
2).条件注释,css hack,特定浏览器标示的样式
-ms- -moz- -webkit- ...
3).IE透明度的处理
4).javascript的兼容性 如event事件 e || window.event
六、javascript闭包
补充:
(function(){...code...})(); 自执行匿名函数
解释:包围函数的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
作用:可以用它创建命名空间,只要把自己所有的代码都写在这个函数包装内,外部就不能访问,除非你允许变量前加window,这样该函数或变量就成为全局。各js库的代码基本也是这种组织形式。
闭包是javascript语言的一个难点,也是它的特色,很多高级应用都是依靠闭包实现。
1、变量的作用域
要理解闭包,首先必须能理解javascript特殊的变量作用域。
变量的作用域无非就两种:全局变量和局部变量。
javascript语言的特殊之处,就是在函数内部可以直接读取全局变量;另一方面,在函数外部自然无法读取函数内部的局部变量。
这里有一个需要注意,函数内部声明变量的时候,一定要使用var命令,如果不用,实际上声明了一个全局变量。
2、如何从外部读取局部变量
那就是在函数内部,再定义一个函数
var n=999;
function f2(){
alert(n); // 999
}
}```
在上面的代码中,函数f2就被包括在函数f1内部,这是f1内部所有的局部变量,对f2都是可见的,但反过来不行,这就是javascript语言特有的“链式作用域”结构,子对象会一级一级得向上寻找所有父对象的变量,所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,只要把f2作为返回值,我们就可以在f1的外部读取他的内部变量了
3、闭包的概念
上面代码中的f2函数,就是闭包。
闭包就是能够读取其他函数内部变量的函数
由于在javascript语言中,只有在函数内部的子函数才能读取局部变量,因此可以把闭包简单的理解成“定义在一个函数内部的函数”。
所以,在本质上 ,闭包就是将函数内部和函数外部连接起来的一座桥梁。
4、闭包的用途
闭包可以用在很多地方。它最大的用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
5、使用闭包的注意点
1)由于闭包会使得函数的变量被保存在内存中,内存消耗大,所以不能滥用闭包,否则造成网页性能问题,在IE中可能造成内存泄漏。解决的办法,在退出函数的时候,将不是用的局部变量全部删除。
2)闭包会在父函数的外部改变父函数内部变量的值。
七、CSS2与CSS3的区别
css3是最新的版本,效果上css2是比不了的,比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等,这是css2上没有的效果。但是css3开发网站的话考虑一些低版本的浏览器可能还不支持。
css3代码更简洁、页面结构更合理,性能和效果得到兼顾;
css3的动态流概念很好,类似FLASH味道,这个css2.0无法比拟;
css3数据更精简实用,许多css2.0要用图片做效果,他不需要,直接代码;
css2要请求服务器次数明显高于css3,所以性能和访问要明显差点。
但目前来讲,css3是新事物,大部分浏览器还不支持css3.
八、css盒模型
margin (外边框)
border(边框)
padding(内边框)
content(内容)
css盒模型本质上是一个盒子,封装周围的html元素,它包括:边距、边框、填充和实际内容。
DIV+CSS两种盒子模型
盒子模型有两种:分别是IE盒子模型和标准W3C盒子模型
IE盒子模型的范围包括margin、border、padding、content,其content部分包含了border和padding
W3C盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。
两种盒子模型应该选择哪种呢
当然是标准W3C盒子模型了。在网页的顶部加上DOCTYPE声明,如果不加DOCTYPE声明,那么各个浏览器会按自己的行为去理解网页,会导致网页在不同浏览器显示不一致。
九、css3 box-sizing属性
规定两个并排的带边框的框
box-sizing 属性有三值:content-box(default), padding-box, border-box。
content-box:border和padding不计算入Width之内(标准模式);
padding-box: padding计算入width内;
border-box: border和padding都计算入width之内(传统IE模式)。
十一、js数据类型
字符串、数字、布尔、对象、null、undefined
js定义了6中基本数据类型即:number、string、boolean、object、null、undefined。
其中object包括Function,Array,Date,RegExp(正则表达)
另外还有Symbol事ES2015的新特性。