初探sessionStorage的使用

作者: 两只凤梨日期: 2016-08-31

136045

本文主要讲述使用sessionStorage缓存接口数据
实例请戳这点我

关于sessionStorage

sessionStorage是针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除，刷新页面数据也还是存在。使用sessionStorage可以避免频繁调取数据接口，把数据储存到客户端。

sessionStorage的常用方法

    window.sessionStorage.name = 'zuiniu';           // 赋值
    window.sessionStorage.setItem('name','zuiniu');  // 赋值
    window.sessionStorage.getItem('name');           // 取值
    window.sessionStorage.removeItem('name');        // 移除对应的值
    window.sessionStorage.clear();                   // 删除所有sessionStorage

效果图

当屏幕高度小于800时，"大话最牛"则只显示两条数据：

当屏幕resize后判断屏幕高度，对应显示"大话最牛"的数据条数：

实现步骤及注意事项

1.要先判断浏览器是否支持sessionStorage，不支持则直接调取接口。
2.先调取接口的数据，第一次调取后把数据用sessionStorage储存起来。
3.当屏幕resize后判断一下sessionStorage储存起来的数据是否满足要显示的条数，不满足则调取接口更新数据，满足则直接读取sessionStorage的数据。
4.使用JSON.stringify()把json数据转化为字符串，再用JSON.parse()反解。
5.屏幕resize时要避免多次触发问题。

js实现：

    var isSessionStorage = !!window.sessionStorage,//判断是否支持sessionStorage
        isgetZuiniu = false,//当sessionloacal数据小于接口要读取的数据时，重新获取接口数据
        _flagZuiniu,//判断3的依据，sessionStorage储存的条数小于当前需要获取的条数，则重新调取数据
    init = function(){
        //do something 
        //根据屏幕大小去判断显示多少条数据
        updateZuiniu(2);
    },
    resizeZuiniu = function(){
        //根据屏幕大小去判断要更新的条数，这里有2,4,6
        updateZuiniu(2);
    },
    updateZuiniu = function(limit){
        //支持sessionStorage，sessionStorage对应有数据，数据条数满足
        if(isSessionStorage && !!sessionStorage.zuiniu && !isgetZuiniu){
            zuiniuCall.call(limit,JSON.parse(sessionStorage.zuiniu));
        }else{
            //不满足上诉条件则调取接口
            getDataZuiniu(limit,zuiniuCall);
        }
    },
    zuiniuCall = function(obj){
        if(isSessionStorage && typeof sessionStorage.zuiniu == 'undefined' || isgetZuiniu){
            sessionStorage.zuiniu = JSON.stringify(obj);
        }
        //do something
        isgetZuiniu = false;
    },
    //数据接口
    getDataZuiniu = function(limit,_call){
        //ajax here
        //callback
        _call.call(limit,obj.result);
    },
    winResize = function(){
        //避免多次触发resize问题
        var resizeTimer = null;
        $(window).bind('resize',function(){
            if(resizeTimer){clearTimeout(resizeTimer)};
            resizeTimer = setTimeout(function(){
                resizeZuiniu();
             },500)
         })
    }

    init();