使用 localStorage做缓存优化

注意,存在 localStorage里的数据都是字符传格式的,要使用JSON.parse转换。

思路如下:

1,读取缓存的数据,例如叫做data_cache

2判断data_cache,if(!data_cache){访问接口,获取数据data,将data字符串化JSON.stringify,存入local名字为data_cache,然后递归自身的函数名}

3 else 解析数据字符串,然后处理吧。

例如:

//获取一级分类数据,并保存到本地
function get1Category() {
    appcan.window.openToast("玩命加载数据中...", 20000, 5, 1);
    var data_cahe = getLocVal(‘get1Category‘);
    if(!data_cahe){
        appcan.ajax({
        url : apiUrl + ‘standard1Category.action‘,
        type : "GET",
        datatype : "json",
        timeout : 30000,
         ajaxCache: true,
        success : function(data, status, requestCode, response, xhr) {
            data2 = JSON.stringify(data);
            setLocVal(‘get1Category‘,data2);
            get1Category();//递归调用
        },
        error : function(xhr, erroType, error, msg) {
            appcan.window.openToast("获取一级分类数据失败", 1000, 5, 0);
        }
    });
    }else{
          //alert(data_cahe);
            data = JSON.parse(data_cahe);
            data = JSON.parse(data);
            if (data.code == ‘1‘) {
                var cate = data.data;
                var str = ‘‘;
                str += ‘<table class="ula tx-c" border="0" cellspacing="0" style="color:#fff;padding-right:1.75em;font-size:1.125em">‘
                str += ‘<tr id="cate2" style="width:100%">‘
                str += ‘<td><div class="btn2 title1 active1"  id="index">推荐</div></td>  ‘;
                for (var i = 0; i < cate.length; i++) {
                    str += ‘<td><div class="btn1 title‘ + (i + 2) + ‘" onclick="goSc2(\‘‘ + cate[i].id + ‘\‘ ,\‘‘ + cate[i].name + ‘\‘,1)" >‘ + cate[i].name + ‘</div></td>‘;
                }
                str += ‘</tr>‘
                str += ‘</table>‘
                $(‘#scroller‘).html(str);
                nav_weight();
                scrollX();
    }
}
}    
时间: 2024-10-07 17:10:32

使用 localStorage做缓存优化的相关文章

前端巧用localStorage做“缓存”,减少HTTP请求次数

场景: 载入某个页面,JS需要通过ajax请求获取某些数据 那么每次刷新页面都会有请求,如果这些数据对实时性要求并不高,显然这样做并不可取. 如何减少服务端的压力,使用localStorage可以解决此问题. //假设id是区分于其他的要储存的k值的一部分.var flag=0,k=null,v_arr=[],v_time=0,v='';var cday = new Date().getDate();var k = window.localStorage.getItem('name_'+id):

1-7 basket.js localstorage.js缓存css、js

basket.js 源码分析 api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/ 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此可以使我们防止不必要的重新请求 js 脚本,提升网站加载速度. 可以到 basket.js 的 Github 上查看更多的相关信息. 由于之前在工作中使用过

CI框架学习之六 ( 数据库查询缓存优化 )

CI框架中有个比较好的查询优化,就是数据库缓存优化 1.开启缓存 //在application/config.php中开启 $db['default']['cache_on'] = TRUE; //在application/config.php中开启 $db['default']['cachedir'] = './cache'; //并在对应的目录中加一个可写缓存目录cache 2. 在对应的查询中开启缓存语句 // 打开缓存开关 $this->db->cache_on(); $query =

从数据库、代码和服务器对PHP网站Mysql做性能优化

数据库优化是PHP面试几乎都会被问到的事情,也是我们工作中应该注意的事情,当然,如果是小网站无所谓优化不优化,网站访问量大了自然会暴漏数据库的瓶颈,这个瓶颈是各方面问题综合导致的,下面我们来做下数据库优化的总结. 一:对数据库优化 1.创建索引 对于查询占主要的应用来说,索引显得尤为重要.很多时候性能问题很简单的就是因为我们忘了添加索引而造成的,或者说没有添加更为有效的索引导致.如果不加索引的话,那么查找任何哪怕只是一条特定的数据都会进行一次全表扫描,如果一张表的数据量很大而符合条件的结果又很少

浏览器的Storage做缓存需要注意的地方

使用浏览器的Storage来做缓存.如: window.sessionStorage.setItem("cache", $(data).stringify()) 需要注意以下几点: 1.Storage存储的值只能存储字符串,其它javaScript数据类型不能存储. 2.sessionStorage的范围在同一浏览器窗口,一但关闭,数据丢失.LocalStorage可以在不同浏览器窗口传递,且缓存时间永久. 3.stringify在js对象不能直接调用,可以用如下方式: $.fn.st

Picaso完美兼容OkHttp3.3,缓存优化两不误 - Tamic Developer"s Blog

为何在Fresco,Glide这么强大的背景下,我又想起了当初的Picasso,又为何写这篇文章?是因为最近项目采用了square公司的RxAndroid,Retrfit和OKhttp, 不得不联想到这个公司曾经还有款图片加载Picasso,所以采用了square公司的全家桶来进行项目开发,为了减少开发成本和也防止Apk增大,毕竟一个公司的框架之前兼容性不用担心,那么请让我们回顾一下Picass之路 首先先让我们看看主流图片加载库 Picasso,Square公司的开源项目 ,和Square的网

销售型网站还要不要做SEO优化

SEO的操作难度越来越大,优化的成本也越来越高,加上新媒体营销被热捧,站在公司领导角度,具体网站要不要做seo优化,是需要认真认真权衡下.那么本文家世比seo夜无影拿销售型网站来说说做seo优化的抉择. 首先我们试想下,一个销售型的网站,用户可能会通过哪些方式找到我们的? 1.百度搜索品牌关键词进入: 2.搜索除品牌关键词外的其他关键词进入: 3.通过百度竞价方式进入: 4.网站网址在QQ群.微信群里推广: 5.通过自媒体文章.微博等社会化媒体文章引导进入: 6.用户推荐.口碑传播. 以上者6种

PHP服务缓存优化之ZendOpcache、xcache、eAccelerator

PHP服务缓存优化原理 Nginx 根据扩展名或者过滤规则将PHP程序请求传递给解析PHP的FCGI,也就是php-fpm进程 缓存操作码(opcode) Opcode,PHP编译后的中间文件,缓存给用户访问 当客户端请求一个PHP程序时,服务器的PHP引擎会解析该PHP程序,并将其编译为特定的操作码文件,该文件是执行PHP代码后的一种二进制文件表现形式.默认情况下,这个编译好的操作码文件由PHP引擎执行后丢弃:而操作码缓存的原理就是将编译后的操作码保存下来,并放入到共享内存里,以便再下一次调用

nginx 多盘做缓存

worker_processes  8; #error_log  logs/error.log; #error_log  logs/error.log  notice; #error_log  logs/error.log  info; #pid        logs/nginx.pid; events {     worker_connections  65535; } http {     include       mime.types;     default_type  applic