摘要：當(dāng)用戶多次訪問(wèn)您的網(wǎng)站，那么靜態(tài)資源在瀏覽器的緩存就是非常重要的。用于控制請(qǐng)求文件的有效時(shí)間，當(dāng)請(qǐng)求數(shù)據(jù)在有效期內(nèi)時(shí)客戶端瀏覽器從緩存請(qǐng)求數(shù)據(jù)而不是服務(wù)器端當(dāng)緩存中數(shù)據(jù)失效或過(guò)期，才決定從服務(wù)器更新數(shù)據(jù)。

當(dāng)用戶多次訪問(wèn)您的網(wǎng)站，那么靜態(tài)資源在瀏覽器的緩存就是非常重要的?？梢跃彺娴撵o態(tài)資源包括css js 圖片等資源。
狀態(tài)碼：200：
當(dāng)瀏覽器沒(méi)有緩存或者用戶按下強(qiáng)制刷新的時(shí)候 瀏覽器就會(huì)向服務(wù)器直接取數(shù)據(jù) 當(dāng)服務(wù)器正確響應(yīng)的時(shí)候會(huì)返回200

這個(gè)屬性是通用首部字段 的cache-control的屬性
這個(gè)字段給出的是一個(gè)具體的時(shí)間，在這個(gè)時(shí)間之后，這份靜態(tài)資源被認(rèn)為是過(guò)時(shí)。
如Expires:Thu, 02 Apr 2009 05:14:08 GMT需和Last-Modified結(jié)合使用。
用于控制請(qǐng)求文件的有效時(shí)間，當(dāng)請(qǐng)求數(shù)據(jù)在有效期內(nèi)時(shí)客戶端瀏覽器從緩存請(qǐng)求數(shù)據(jù)而不是服務(wù)器端.當(dāng)緩存中數(shù)據(jù)失效或過(guò)期，才決定從服務(wù)器更新數(shù)據(jù)。區(qū)別于Max-age:120 是一個(gè)事件段

當(dāng)瀏覽器第一次向服務(wù)器請(qǐng)求資源并正確返回響應(yīng)的時(shí)候，服務(wù)器返回的響應(yīng)：
狀態(tài)碼：200
首部：Last-Modified 這個(gè)資源在服務(wù)器端最后一次被修改的時(shí)間。
實(shí)體內(nèi)容：響應(yīng)
當(dāng)瀏覽器第二次再次訪問(wèn)這個(gè)靜態(tài)資源的時(shí)候，請(qǐng)求報(bào)文會(huì)在首部添加字段
If-Modified-Since:值和Last-Modified（第一次接收到的響應(yīng)的）值是一樣的，來(lái)詢(xún)問(wèn)服務(wù)器在這個(gè)時(shí)間之后是更新過(guò)這個(gè)資源。如果沒(méi)有更新過(guò)就會(huì)返回響應(yīng)：304 Not_Modified

這個(gè)字段是 請(qǐng)求變量的實(shí)體值
當(dāng)用戶第一次訪問(wèn)的時(shí)候，服務(wù)器會(huì)返回
狀態(tài)碼：200
首部字段：Etag:dadmsdadks23
實(shí)體：相應(yīng)的內(nèi)容
當(dāng)用戶第二次請(qǐng)求該靜態(tài)資源的時(shí)候會(huì)發(fā)送
首部字段：if-None-Math:w/dadmsdadks23
如果這個(gè)靜態(tài)資源的實(shí)體值仍然為dadmsdadks23 就會(huì)返回304

這是html5的新特性 有兼容性問(wèn)題。
使用websql有以下3步：
1、使用openDataBase創(chuàng)建數(shù)據(jù)庫(kù)
2、使用創(chuàng)建的額數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象來(lái)執(zhí)行transation方法，通過(guò)此方法設(shè)置一個(gè)開(kāi)啟事務(wù)的成功的事件響應(yīng)方法。
3、通過(guò)executeSql方法來(lái)執(zhí)行查詢(xún)。也可以是crud

var dataBase=openDatabase("school","1.0","表示學(xué)校的數(shù)據(jù)庫(kù)",1024*1024,function () {
        console.log(11)
    })
    if(!dataBase){
        console.log("當(dāng)前瀏覽器不支持webSql")
    }else{
        //創(chuàng)建表
        /*dataBase.transaction(function (ts) {//啟動(dòng)一個(gè)事務(wù)，并設(shè)置回調(diào)函數(shù)，啟動(dòng)成功的時(shí)候執(zhí)行
            ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],function (ts,result) {
                console.log("創(chuàng)建成功一個(gè)表"+result)
            },function (ts,message) {
                console.log("這個(gè)表沒(méi)有被成功創(chuàng)建"+message)
            })
        })*/
        //向表中插入數(shù)據(jù)
        /*dataBase.transaction(function (ts) {
            ts.executeSql("insert into Student(id,name,age,sex) values (?,?,?,?)",[2,"小明",21,"男"],function (ts,res) {
                console.log("數(shù)據(jù)插入成功"+res)
            },function (ts,message) {
                console.log("數(shù)據(jù)插入失敗"+message)
            })
        })*/
        //數(shù)據(jù)更新
        /*dataBase.transaction(function (ts) {
            ts.executeSql("update Student set name=? where id=?",["小紅s",2],function (ts,res) {
                console.log("數(shù)據(jù)更新成功"+res)
            },function (ts,message) {
                console.log("數(shù)據(jù)更新失敗"+message)
            })
        })*/
        //刪除數(shù)據(jù)
        /* dataBase.transaction(function (ts) {
             ts.executeSql("delete from  Student where id=?",[2],function (ts,res) {
                 console.log("數(shù)據(jù)刪除成功"+res)
             },function (ts,message) {
                 console.log("數(shù)據(jù)刪除失敗"+message)
             })
         })*/
        dataBase.transaction(function (ts) {
            ts.executeSql("select * from Student",[],function (ts,res) {
                if(res){
                    for(var i=0;i
WebStorage
HTML新增的本地存儲(chǔ)化方案之一。它的存在在于解決本來(lái)不應(yīng)該用cookie做，卻不得不用cookie做的事情。 
localStorage和sessionStorage
localStroage可以永久性的存儲(chǔ)數(shù)據(jù)，除非顯示的將數(shù)據(jù)刪除或清空。 
sessionStorage中存儲(chǔ)的數(shù)據(jù)只會(huì)在會(huì)話期間有效，關(guān)閉瀏覽器的時(shí)候自動(dòng)刪除數(shù)據(jù)。
   var ls=localStorage;
    //設(shè)置key和value
    ls.setItem("name","1");
    for(var i=0;i
同時(shí)HTML5中規(guī)定對(duì)WebStorage做修改的時(shí)候，會(huì)觸發(fā)storage事件。但是這個(gè)一般用于多窗口之間共享一個(gè)數(shù)據(jù)，看到這里是不是很疑惑那storage事件到底有什么用，多窗口間多通信用到它就是最好選擇了，比如某塊公用內(nèi)容區(qū)域基礎(chǔ)數(shù)據(jù)部分都是從store中提取的，這個(gè)區(qū)域中大多數(shù)頁(yè)面中都有，當(dāng)用戶打開(kāi)多個(gè)頁(yè)面時(shí)，在其中一個(gè)頁(yè)面做了數(shù)據(jù)修改，那其他頁(yè)面同步更新是不是很方便（當(dāng)前頁(yè)面就要用其他方式處理了），當(dāng)然用于窗口間通信它作用不僅僅如此，更多的大家可以利用它特性去發(fā)揮。 
頁(yè)面1
    window.addEventListener("storage", function(e){       
         console.log(e);
         document.write("oldValue: "+ e.oldValue+" newValue:"+ e.newValue)    });
頁(yè)面2