AJAX请求 JSON数据并实现本地缓存

本文主要介绍通过ajax请求json数据，并实现数据的本地存储，以下面的实例为例，并实现以下功能：

• 点击新闻列表某一条新闻，跳转到新闻详情页并显示对应的新闻内容。
• 点击上一页、下一页切换文章内容

效果图

新闻列表.png
新闻详情.png

技术方面

• 把需要的数据都存在了json文件里，通过Ajax来获取JSON数据。
• 对获取的json数据的处理，序列化和反序列化。
• 使用 localStorage实现数据的本地缓存。
• 通过window.location.search来获取两个html页面间的参数的传递。
• 通过点击事件来实现上一页和下一页的切换，并通过
• window.location.assign()来改变url。

js代码

var url=window.location.search;
    var id=url.match(/\d*$/);
    var obj={};     // 用来存放数据
    /*缓存 先判断本地是否有缓存*/
    if(localStorage.getItem('data')==null ||localStorage.getItem('data')=='undefined'){
        $.ajax({
            type:"post",
            url:"json/data.json",
            success:function(data){
                //序列化转化成json字符串
                localStorage.setItem('data',JSON.stringify(data));
                showData(); 
              }
          })
    }else{
        showData();

    }
    
    function showData(){
        var storage=localStorage.getItem('data');
            //反序列化 将字符串转化成json对象
        var jsonData=JSON.parse(storage)['data'];
        for(var i=0;i<jsonData.length;i++){
            if(jsonData[i].id==id){
                obj=jsonData[i];
            }
        }

       $(".detail-title h1").html(obj.title);     // 修改文章内容
       $(".detail-content").html(obj.content);

       // 上一页 下一页
       $(".detail-foot-left").on("click",function(){
           if(id>1){
               --id;
               showData();
               window.location.assign("details.html?id="+id);
               window.scrollTo(0,0);
           }
       })
       $(".detail-foot-right").on("click",function(){
           if(id<jsonData.length){
               ++id;
               showData();
               window.location.assign("details.html?id="+id);
               window.scrollTo(0,0);
           }
       })
    }