网页前端设计

1、简述

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

效果图如下：

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的页面 返回列表页面时并不会重新加载

(完)

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