前端浏览器缓存

当用户多次访问您的网站，那么静态资源在浏览器的缓存就是非常重要的。可以缓存的静态资源包括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步：
1、使用openDataBase创建数据库
2、使用创建的额数据库访问对象来执行transation方法，通过此方法设置一个开启事务的成功的事件响应方法。
3、通过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的相同点和区别

区别：
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2、存储数据的大小：cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3、数据的有效期不同
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，不管浏览器的窗口是否关闭
4、作用域不同，
sessionStorage不会在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
5、Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。