一、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的新特性。
网友评论