一篷店、session與cookie區(qū)別

session存儲(chǔ)在服務(wù)端砂客，
session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上挤牛，當(dāng)訪問增多莹痢，會(huì)比較站服務(wù)器性能，考慮性能方面墓赴，應(yīng)當(dāng)用cookie
session是服務(wù)端技術(shù)竞膳，服務(wù)器在運(yùn)行的時(shí)候可以為每個(gè)用戶的瀏覽器創(chuàng)建一個(gè)獨(dú)享的session對(duì)象，
由于session為用戶瀏覽器獨(dú)享诫硕，所以用戶在訪問服務(wù)器的web資源時(shí)坦辟，可以把各自的數(shù)據(jù)放在各自的session中，當(dāng)用戶再去訪問服務(wù)器中的其它web資源時(shí)章办，其它web資源再從用戶各自的session中取出數(shù)據(jù)為用戶服務(wù)锉走。

cookie存儲(chǔ)在客戶端，
別人可以分析存儲(chǔ)在本地的cookie并進(jìn)行cookie欺騙藕届，考慮安全問題應(yīng)當(dāng)用session
單個(gè)cookie保存數(shù)據(jù)不超過4k挪蹭，很多瀏覽器限制一個(gè)站點(diǎn)最多保存20個(gè)cookie
cookie是客戶端技術(shù)，程序把用戶的信息以cookie的形式存儲(chǔ)在用戶各自的瀏覽器休偶。當(dāng)用戶使用瀏覽器再去訪問服務(wù)器中的web資源時(shí)梁厉，就會(huì)帶著各自的數(shù)據(jù)去。這樣椅贱，web資源處理的就是用戶各自的數(shù)據(jù)了懂算。

如不設(shè)置cookie的過期時(shí)間，則表示cookie的生命周期為瀏覽器的會(huì)話期間庇麦，關(guān)閉瀏覽器窗口计技，cookie就消失。
會(huì)話cookie存儲(chǔ)在內(nèi)存里山橄，如設(shè)置了過期時(shí)間垮媒，瀏覽器會(huì)把cookie存在硬盤上，存在硬盤上的cookie可以在不同瀏覽器進(jìn)程之間共享航棱。

*HTML5Web存儲(chǔ)

html5提供兩種在客戶端存儲(chǔ)數(shù)據(jù)的方法：

localStorage-沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage-針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)
之前這些都是有cookie完成睡雇。但是cookie不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗麄冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞饮醇，這使得cookie速度慢且效率也不高
在html5中它抱，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)朴艰。它使得在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能

eg：localStorage方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制观蓄。第二天混移、第二周或下一年，數(shù)據(jù)依然可用

統(tǒng)計(jì)頁面訪問次數(shù)
<script>
if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount)+1;
}else{
localStorage.pagecount=1;
}
document.write("Visits"+localStorage.pagecount+"times");
</script>

sessionStorage方法針對(duì)一個(gè)sessionStorage進(jìn)行數(shù)據(jù)存儲(chǔ)侮穿。當(dāng)用戶關(guān)閉瀏覽器窗口后歌径，數(shù)據(jù)會(huì)被刪除
eg下面的例子對(duì)用戶在當(dāng)前session中訪問頁面的次數(shù)進(jìn)行計(jì)數(shù)：

<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的優(yōu)勢(shì)與局限
優(yōu)勢(shì)：
1.擴(kuò)展了cookie的4k限制；
2.可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)在本地亲茅，相當(dāng)于一個(gè)5M大小的針對(duì)前端頁面的數(shù)據(jù)庫回铛，相比于cooki可以節(jié)約帶寬（但卻只有高版本的瀏覽器才支持）；
局限：
1.瀏覽器的大小不統(tǒng)一克锣，并且在IE8以上的瀏覽器才支持這個(gè)屬性茵肃；
2.目前所有的瀏覽器都會(huì)把localStorage的值類型限定為string類型，比較常見的json對(duì)象類型需要一些轉(zhuǎn)換（可以使用JSON.stringify()這個(gè)方法娶耍，來將JSON轉(zhuǎn)換成為JSON字符串）免姿；
3.在瀏覽器的私密模式下是不可讀取的（讀取之后要將JSON字符串轉(zhuǎn)換成為JSON對(duì)象，使用JSON.parse()方法）榕酒；
4.其本質(zhì)上是對(duì)字符串的讀取胚膊，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，導(dǎo)致頁面變卡想鹰；
5.不能被爬蟲抓取到紊婉；
localStorage與sessionStorage的唯一區(qū)別就是localStorage屬于永久性存儲(chǔ)，二sessionStorage屬于當(dāng)會(huì)話結(jié)束的時(shí)候辑舷，sessionStorage中的鍵值對(duì)會(huì)被清空

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"]獲取到的信息均為實(shí)際存儲(chǔ)的副本
*eg：
storage.key={value1:"value1"};
storage.key.value1="a";
這里是無法對(duì)實(shí)際存儲(chǔ)的值產(chǎn)生作用的，這種寫法也不可以：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()方法肢础，向其中出入索引即可獲取對(duì)應(yīng)的鍵

注：localStorage的使用遵循同源策略，所以不同的網(wǎng)站直接是不能共用相同的localStorage

二碌廓、js判斷用戶的瀏覽器設(shè)備是移動(dòng)端還是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("您的瀏覽設(shè)備為：");
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;
}
}

四. 前后端交互協(xié)議

restful協(xié)議

五. 常見瀏覽器兼容問題

1).不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同传轰，所以設(shè)置margin,padding 為0；
2).條件注釋谷婆，css hack慨蛙，特定瀏覽器標(biāo)示的樣式
-ms- -moz- -webkit- ...
3).IE透明度的處理
4).javascript的兼容性 如event事件 e || window.event

六、javascript閉包

補(bǔ)充：
(function(){...code...})(); 自執(zhí)行匿名函數(shù)
解釋：包圍函數(shù)的第一對(duì)括號(hào)向腳本返回未命名的函數(shù)纪挎，隨后一對(duì)空括號(hào)立即執(zhí)行返回的未命名函數(shù)期贫，括號(hào)內(nèi)為匿名函數(shù)的參數(shù)。
作用：可以用它創(chuàng)建命名空間异袄，只要把自己所有的代碼都寫在這個(gè)函數(shù)包裝內(nèi)通砍，外部就不能訪問，除非你允許變量前加window烤蜕，這樣該函數(shù)或變量就成為全局封孙。各js庫的代碼基本也是這種組織形式垢揩。

閉包是javascript語言的一個(gè)難點(diǎn)，也是它的特色敛瓷，很多高級(jí)應(yīng)用都是依靠閉包實(shí)現(xiàn)。

1斑匪、變量的作用域

要理解閉包呐籽，首先必須能理解javascript特殊的變量作用域。
變量的作用域無非就兩種：全局變量和局部變量蚀瘸。
javascript語言的特殊之處狡蝶，就是在函數(shù)內(nèi)部可以直接讀取全局變量；另一方面贮勃，在函數(shù)外部自然無法讀取函數(shù)內(nèi)部的局部變量贪惹。
這里有一個(gè)需要注意，函數(shù)內(nèi)部聲明變量的時(shí)候寂嘉，一定要使用var命令奏瞬，如果不用，實(shí)際上聲明了一個(gè)全局變量泉孩。

2硼端、如何從外部讀取局部變量

那就是在函數(shù)內(nèi)部，再定義一個(gè)函數(shù)

  var n=999;
  function f2(){
    alert(n); // 999
  } 

}```

在上面的代碼中寓搬，函數(shù)f2就被包括在函數(shù)f1內(nèi)部珍昨，這是f1內(nèi)部所有的局部變量，對(duì)f2都是可見的句喷，但反過來不行镣典，這就是javascript語言特有的“鏈?zhǔn)阶饔糜颉苯Y(jié)構(gòu)，子對(duì)象會(huì)一級(jí)一級(jí)得向上尋找所有父對(duì)象的變量唾琼，所以兄春，父對(duì)象的所有變量，對(duì)子對(duì)象都是可見的父叙，反之則不成立神郊。
既然f2可以讀取f1中的局部變量，只要把f2作為返回值趾唱，我們就可以在f1的外部讀取他的內(nèi)部變量了

3涌乳、閉包的概念

上面代碼中的f2函數(shù)，就是閉包甜癞。
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
由于在javascript語言中夕晓，只有在函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單的理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”悠咱。
所以蒸辆，在本質(zhì)上 征炼，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。

4躬贡、閉包的用途

閉包可以用在很多地方谆奥。它最大的用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量拂玻，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中酸些。

5、使用閉包的注意點(diǎn)

1）由于閉包會(huì)使得函數(shù)的變量被保存在內(nèi)存中檐蚜，內(nèi)存消耗大魄懂，所以不能濫用閉包，否則造成網(wǎng)頁性能問題闯第，在IE中可能造成內(nèi)存泄漏市栗。解決的辦法，在退出函數(shù)的時(shí)候咳短，將不是用的局部變量全部刪除填帽。
2）閉包會(huì)在父函數(shù)的外部改變父函數(shù)內(nèi)部變量的值。

七咙好、CSS2與CSS3的區(qū)別

css3是最新的版本盲赊，效果上css2是比不了的，比如定義圓角敷扫、背景顏色漸變哀蘑、背景圖片大小控制和定義多個(gè)背景圖片等，這是css2上沒有的效果葵第。但是css3開發(fā)網(wǎng)站的話考慮一些低版本的瀏覽器可能還不支持绘迁。

css3代碼更簡潔、頁面結(jié)構(gòu)更合理卒密，性能和效果得到兼顧缀台；
css3的動(dòng)態(tài)流概念很好，類似FLASH味道哮奇，這個(gè)css2.0無法比擬膛腐；
css3數(shù)據(jù)更精簡實(shí)用，許多css2.0要用圖片做效果鼎俘，他不需要哲身，直接代碼；
css2要請(qǐng)求服務(wù)器次數(shù)明顯高于css3贸伐，所以性能和訪問要明顯差點(diǎn)勘天。
但目前來講，css3是新事物，大部分瀏覽器還不支持css3.

八脯丝、css盒模型

margin (外邊框)
border（邊框）
padding（內(nèi)邊框）
content（內(nèi)容）
css盒模型本質(zhì)上是一個(gè)盒子商膊，封裝周圍的html元素，它包括：邊距宠进、邊框晕拆、填充和實(shí)際內(nèi)容。

DIV+CSS兩種盒子模型

盒子模型有兩種：分別是IE盒子模型和標(biāo)準(zhǔn)W3C盒子模型
IE盒子模型的范圍包括margin材蹬、border潦匈、padding、content赚导，其content部分包含了border和padding
W3C盒子模型的范圍包括margin裳瘪、border挺举、padding贪壳、content决侈，并且content部分不包含其他部分叶组。

兩種盒子模型應(yīng)該選擇哪種呢

當(dāng)然是標(biāo)準(zhǔn)W3C盒子模型了术瓮。在網(wǎng)頁的頂部加上DOCTYPE聲明泽铛，如果不加DOCTYPE聲明缘挽，那么各個(gè)瀏覽器會(huì)按自己的行為去理解網(wǎng)頁裕膀，會(huì)導(dǎo)致網(wǎng)頁在不同瀏覽器顯示不一致员串。

九、css3 box-sizing屬性

規(guī)定兩個(gè)并排的帶邊框的框

box-sizing 屬性有三值：content-box(default)昼扛， padding-box寸齐， border-box。
content-box：border和padding不計(jì)算入Width之內(nèi)（標(biāo)準(zhǔn)模式）抄谐；
padding-box: padding計(jì)算入width內(nèi)渺鹦；
border-box: border和padding都計(jì)算入width之內(nèi)（傳統(tǒng)IE模式）。

十一蛹含、js數(shù)據(jù)類型

字符串毅厚、數(shù)字、布爾浦箱、對(duì)象吸耿、null、undefined
js定義了6中基本數(shù)據(jù)類型即：number酷窥、string咽安、boolean、object蓬推、null板乙、undefined。
其中object包括Function，Array募逞，Date蛋铆，RegExp（正則表達(dá)）
另外還有Symbol事ES2015的新特性。