前端浏览器缓存

当用户屡次访问您的网站，那么静态资源在浏览器的缓存就是很是重要的。能够缓存的静态资源包括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 支持事件通知机制，能够将数据更新的通知发送给监听者。