网页前端设计

http://www.86y.org

搜索文章

jq+html5滚动到底部自动加载数据之(保存数据)

用声音读出全文关注我吧
 2016/6/8 22:53:32 阅读次数:9190

1、简述

上一篇《jq滚动到底部自动加载数据实例》效果实现了,但是一直有个问题点击详细后返回数据又 重新加载了,今天就是为了这个BUG而写的,本实例正是运用了html5的localstorage(本地存储)。当然做这个效果是为了手机效果而做的,所以PC端暂时没办法全部兼容,所以效果图也是手机端的。(文章底部附DEMO预览及下载地址)

效果图如下:
jq滚动到底部自动加载数据之(保存数据)

2、核心内容讲解

(1)、本文使用的插件是:Lawnchair(Lawnchair是一个轻量级的移动应用程序数据持久化存储方案,同时也是客户端JSON文档存储方法,优点是短小,语法简洁,扩展性比较好。)

Git地址是:https://github.com/brianleroux/lawnchair

API:

 

keys (callback) //返回存储对象的所有keys
save (obj, callback)//保存一个对象
batch(array, callback)//保存一组对象
get (key|array, callback)//获取一个或者一组对象,然后调用callback处理
exists (key, callback)//检查是否存在key,并将结果的布尔值(true/false)传递给callback函数
each(callback)//遍历集合,将(对象,对象索引)传递给callback函数
all (callback)//将所有对象放在一个数组返回
remove (key|array, callback)//移除一个或者一组元素。
nuke (callback)//销毁所有

初始化:

var store = new Lawnchair({name:"test"}, function() {});
//或者
var store = new Lawnchair(function() {});

本插件的使用就是只能添加数据并且会覆盖到以前的数据(如果key值是一个的情况下),本实例使用的时候需要定义一个公共变量,保存最新的json值,当获取到新的json时,只需要在公 共变量上增加新的json即可并且保存到公共变量中,然后再保存到localstorage中,如果满足条件就可以直接输出localstorage,否则就清空。

下面将介绍三个重要的操作方法:(已经包含在 Lawnchair 插件中了)

//初始化
var store = new Lawnchair(function() {});
//合并json 方法
function extend(json, json2){
   var str3=[];
   for (var i = 0; i < json.length; i++) {
          str3.push(json[i]);
      }
       
      for (var i = 0; i < json2.length; i++) {
          str3.push(json2[i]);
      } 
 
      var str3 = json.concat(json2);

   return str3;
}

//累加到localstorage
function addstorage(njson){
    //判断data数据是否为undefined,如果不是则把localstorage的值保存到公共变量json中
    store.get("data", function(me){
         if(typeof(me)!="undefined")
        {
            var hasdata=me.options;       
            json=hasdata;
        }
    });


    var dt=extend(json,njson);//将新旧json合并
    json=dt;
    store.save({key:"data",options:dt});    
}

//输出localstorage数据到页面
function loadstorage(id)
{
    store.get("data", function(me){
        var cont=me.options.length;
        var htmls="";
        for(var i=0;i<cont;i++)
        {
            htmls += me.options[i]["art"];
        }
        $(id).html(htmls);
  });
}

(2)、cookie的使用:

cookie插件:(此实例已经将插件放在jquery-1.9.1.min.js中了)

//cookies
jQuery.cookie = function (name, value, options) {
    if (typeof value != "undefined") {
        options = options || {};
        if (value === null) {
            value = "";
            options = $.extend({}, options);
            options.expires = -1;
        }
        var expires = "";
        if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == "number") {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = "; expires=" + date.toUTCString();
        }
        var path = options.path ? "; path=" + (options.path) : "";
        var domain = options.domain ? "; domain=" + (options.domain) : "";
        var secure = options.secure ? "; secure" : "";
        document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("");
    } else {
        var cookieValue = null;
        if (document.cookie && document.cookie != "") {
            var cookies = document.cookie.split(";");
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + "=")) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

使用方法:

//获取cookie
$.cookie("detail");

//设置cookie,别问我为什么要这么用,当多个目录使用时会存在获取不到cookie,cookie统一保存在一样的目录就可以
$.cookie("detail", "1", { expires: 7, path: "/" });

//清空cookie
$.cookie("detail", null, { expires: 7, path: "/" });

3、结语

本实例已在项目中运用,主要是手机移动端,对于html5的新技术,摸索了很多,特别是对存储的使用技巧等。别的不多说了,如果大家使用中发现有什么问题可以跟我说,我会第一 时间与大家讨论。还是那句话,写博客的原因有很多,能提高自己的同时也能帮助别人,何乐而不为。

代码DEMO地址 http://www.86y.org/DEMO/scrollload/ (建议复制到到手机上打开)
完整版DEMO下载 http://pan.baidu.com/s/1jHEOEjG 密码: ktgi

由于 safari浏览器的内核不支持history.back() ,返回时页面并不会执行JS所以此效果可以完美实现。所以如果你在苹果手机上使用safari内核的浏览浏览本实例DEMO时,从没有保 存cookie的页面 返回列表页面时并不会重新加载

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=782【jq+html5滚动到底部自动加载数据之(保存数据)】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭