js关于localstore的应用

最新推荐文章于 2025-05-07 15:25:56 发布

gezipml

最新推荐文章于 2025-05-07 15:25:56 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js

本文链接：https://blog.youkuaiyun.com/gezipml/article/details/82756930

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

2 篇文章

订阅专栏

针对商城首页返回操作频繁重新加载的问题，本文介绍了一种利用本地缓存提高用户体验的方法。通过在用户浏览商品详情后返回时使用缓存数据，避免了重复加载页面的困扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接到新需求，有客户反映我们的商城首页在点进去商品详情后再返回又要重新划，特别是在分了很多页后，在返回后又要重新一页一页地上拉加载，很累。

前端是API的开发模式，所以对功能的实现有一些限制。

我的想法是：在每加载一次数据的时候，将所有的动态数据存入本地。在返回的时候先判断是否有缓存，如果有缓存就不用ajax请求接口获取数据了，直接将缓存里的数据渲染到页面，如果没有缓存再请求数据。

以下代码：

$(function(){
    if(localStorage.groups_data){
        //获取当前时间戳
        var timestamp = (new Date()).getTime();
        var data = JSON.parse(localStorage.groups_data);
        if(timestamp-data.time>expTime*1000){
            //如果缓存时间超过十分钟，则清除缓存并且重新调用
            localStorage.removeItem("groups_data")
            bindLoad(0)//绑定事件
            return;
        }
        var html = data.data;
        $(".wrap").html(html);
        bindLoad(data.page);//绑定事件
    }else{
        // console.log('无缓存')
        bindLoad(0)//绑定事件
    }

})

//分页加载成功执行的方法，在这里存入页面HTML代码
function success(){
    var timestamp = (new Date()).getTime();
    var html = $(".wrap").html();
    var groupsData = {
        "page":page,//当前页，方便在刷新之后绑定事件事传入页面
        "data":html,
        "time":timestamp//时间戳，存储的时间
    }
    //将对象序列化存储，取出时应反序列化。
    localStorage.setItem("groups_data",JSON.stringify(groupsData));

}