前端瀏覽器緩存

當用戶屢次訪問您的網站，那麼靜態資源在瀏覽器的緩存就是很是重要的。能夠緩存的靜態資源包括css js 圖片等資源。
狀態碼：200：
當瀏覽器沒有緩存或者用戶按下強制刷新的時候 瀏覽器就會向服務器直接取數據 當服務器正確響應的時候會返回200

Expire

這個屬性是通用首部字段 的cache-control的屬性
這個字段給出的是一個具體的時間，在這個時間以後，這份靜態資源被認爲是過期。
如Expires:Thu, 02 Apr 2009 05:14:08 GMT需和Last-Modified結合使用。
用於控制請求文件的有效時間，當請求數據在有效期內時客戶端瀏覽器從緩存請求數據而不是服務器端.當緩存中數據失效或過時，才決定從服務器更新數據。區別於Max-age:120 是一個事件段

Last-Modified

當瀏覽器第一次向服務器請求資源並正確返回響應的時候，服務器返回的響應：
狀態碼：200
首部：Last-Modified 這個資源在服務器端最後一次被修改的時間。
實體內容：響應
當瀏覽器第二次再次訪問這個靜態資源的時候，請求報文會在首部添加字段
If-Modified-Since:值和Last-Modified（第一次接收到的響應的）值是同樣的，來詢問服務器在這個時間以後是更新過這個資源。若是沒有更新過就會返回響應：304 Not_Modified

Etag

這個字段是 請求變量的實體值
當用戶第一次訪問的時候，服務器會返回
狀態碼：200
首部字段：Etag:dadmsdadks23
實體：相應的內容
當用戶第二次請求該靜態資源的時候會發送
首部字段：if-None-Math:w/dadmsdadks23
若是這個靜態資源的實體值仍然爲dadmsdadks23 就會返回304

WebSql

這是html5的新特性 有兼容性問題。
使用websql有如下3步：
一、使用openDataBase建立數據庫
二、使用建立的額數據庫訪問對象來執行transation方法，經過此方法設置一個開啓事務的成功的事件響應方法。
三、經過executeSql方法來執行查詢。也能夠是crud

var dataBase=openDatabase("school","1.0","表示學校的數據庫",1024*1024,function () {
        console.log(11)
    })
    if(!dataBase){
        console.log("當前瀏覽器不支持webSql")
    }else{
        //建立表
        /*dataBase.transaction(function (ts) {//啓動一個事務，並設置回調函數，啓動成功的時候執行
            ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],function (ts,result) {
                console.log("建立成功一個表"+result)
            },function (ts,message) {
                console.log("這個表沒有被成功建立"+message)
            })
        })*/
        //向表中插入數據
        /*dataBase.transaction(function (ts) {
            ts.executeSql("insert into Student(id,name,age,sex) values (?,?,?,?)",[2,"小明",21,"男"],function (ts,res) {
                console.log("數據插入成功"+res)
            },function (ts,message) {
                console.log("數據插入失敗"+message)
            })
        })*/
        //數據更新
        /*dataBase.transaction(function (ts) {
            ts.executeSql("update Student set name=? where id=?",["小紅s",2],function (ts,res) {
                console.log("數據更新成功"+res)
            },function (ts,message) {
                console.log("數據更新失敗"+message)
            })
        })*/
        //刪除數據
        /* dataBase.transaction(function (ts) {
             ts.executeSql("delete from  Student where id=?",[2],function (ts,res) {
                 console.log("數據刪除成功"+res)
             },function (ts,message) {
                 console.log("數據刪除失敗"+message)
             })
         })*/
        dataBase.transaction(function (ts) {
            ts.executeSql("select * from Student",[],function (ts,res) {
                if(res){
                    for(var i=0;i<res.rows.length;i++){
                        console.log(res.rows.item(i))
                    }
                }
            },function (ts,message) {
                console.log("數據查詢失敗"+message)
            })
        })
    }

WebStorage

HTML新增的本地存儲化方案之一。它的存在在於解決原本不該該用cookie作，卻不得不用cookie作的事情。

localStorage和sessionStorage

localStroage能夠永久性的存儲數據，除非顯示的將數據刪除或清空。

sessionStorage中存儲的數據只會在會話期間有效，關閉瀏覽器的時候自動刪除數據。

var ls=localStorage;
    //設置key和value
    ls.setItem('name',"1");
    for(var i=0;i<ls.length;i++){
        //獲得第i個關鍵字
        var key=ls.key(i);
        console.log(key+"*****",ls.getItem(key))
    }
    console.log(ls.length)

同時HTML5中規定對WebStorage作修改的時候，會觸發storage事件。可是這個通常用於多窗口之間共享一個數據，看到這裏是否是很疑惑那storage事件到底有什麼用，多窗口間多通訊用到它就是最好選擇了，好比某塊公用內容區域基礎數據部分都是從store中提取的，這個區域中大多數頁面中都有，當用戶打開多個頁面時，在其中一個頁面作了數據修改，那其餘頁面同步更新是否是很方便（當前頁面就要用其餘方式處理了），固然用於窗口間通訊它做用不只僅如此，更多的你們能夠利用它特性去發揮。
頁面1

window.addEventListener("storage", function(e){       
         console.log(e);
         document.write("oldValue: "+ e.oldValue+" newValue:"+ e.newValue)    });

頁面2

<input type="text"placeholder="input date to save">
<script>
    (function(D){
        varval= D.getElementsByTagName("input")[0],
            btn = D.getElementsByTagName("button")[0];       
            btn.onclick =function(){         
                varvalue=val.value;if(!value) return;       
                localStorage.setItem("key",val.value);   
            };   
    })(document);

頁面2中輸入的數據點擊保存之後 會觸發頁面1 中註冊的storage事件
一樣對session的使用也是一樣的方法

storage與cookie的相同點和區別

區別：
一、cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
二、存儲數據的大小：cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
三、數據的有效期不一樣
sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；
localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；
cookie只在設置的cookie過時時間以前一直有效，無論瀏覽器的窗口是否關閉
四、做用域不一樣，
sessionStorage不會在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
localStorage 在全部同源窗口中都是共享的；
cookie也是在全部同源窗口中都是共享的。五、Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。