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

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

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

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

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

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

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