资讯专栏INFORMATION COLUMN

前端浏览器缓存

KevinYan / 692人阅读

摘要:当用户多次访问您的网站,那么静态资源在浏览器的缓存就是非常重要的。用于控制请求文件的有效时间,当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端当缓存中数据失效或过期,才决定从服务器更新数据。

当用户多次访问您的网站,那么静态资源在浏览器的缓存就是非常重要的。可以缓存的静态资源包括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
WebStorage
HTML新增的本地存储化方案之一。它的存在在于解决本来不应该用cookie做,却不得不用cookie做的事情。 

localStorage和sessionStorage

localStroage可以永久性的存储数据,除非显示的将数据删除或清空。 

sessionStorage中存储的数据只会在会话期间有效,关闭浏览器的时候自动删除数据。

   var ls=localStorage;
    //设置key和value
    ls.setItem("name","1");
    for(var i=0;i

同时HTML5中规定对WebStorage做修改的时候,会触发storage事件。但是这个一般用于多窗口之间共享一个数据,看到这里是不是很疑惑那storage事件到底有什么用,多窗口间多通信用到它就是最好选择了,比如某块公用内容区域基础数据部分都是从store中提取的,这个区域中大多数页面中都有,当用户打开多个页面时,在其中一个页面做了数据修改,那其他页面同步更新是不是很方便(当前页面就要用其他方式处理了),当然用于窗口间通信它作用不仅仅如此,更多的大家可以利用它特性去发挥。
页面1

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

页面2


                
阅读需要支付1元查看
<