javascript localStorage 读取为空

第一次打开页面时读取到的localStorage值为空吗,只有第二次会读取到?
我请空浏览器缓存后打开页面,getItem读取到的localStorage为空,再次刷新后就有了,有办法第一次就能获取到吗?

代码如下:


/**
 * [setImgArr :设置需要本地缓存的图片数组]
 * 注意:图片按数组顺序存入localStroage,
 *       使用name="cacheswitch"属性作为标识
 * [getImgArr :将缓存图片取出,放入数组中]      
 * @type {Array}
 */

var setImgArr = [],
    getImgArr = [];
/**
 * [getImgSrc 获取页面中有标识的图片的src,添加到本地缓存数组中,并从本地缓存中取出赋值给img src]
 * 
 */
getImgSrc();
function getImgSrc() {
    $('img').each(function() {
        var attr=$(this).attr("name");
        if(attr=="cacheImg") {
            setImgArr.push($(this).attr("src"));
        }
    });

    for(i in setImgArr) {
        setImg(setImgArr[i]);//设置图片缓存
        getImg(setImgArr[i]);//获取图片缓存
    }

    var attrCache=document.getElementsByName("cacheImg");
    for(var i=0;i<attrCache.length;i++) {
        // attrCache[i].src=getImgArr[i];
    }
}

/**
 * [setImg 设置本地图片缓存]
 * @return {[type]} [description]
 */
function setImg(key) {
    var img=document.createElement('img');
    img.addEventListener('load',function(){
        //创建一个canvas
        var imgCanvas=document.createElement("canvas"),
            imgContext=imgCanvas.getContext("2d");
        //确保canvas元素的大小和图片尺寸一致
        imgCanvas.width=this.width;
        imgCanvas.height=this.height;
        //渲染图片到canvas中,使用canvas的drawImage()方法
        imgContext.drawImage(this,0,0,this.width,this.height);
        //用canvas的dataUrl的形式取出图片,imgAsDataURL是一个base64字符串
        var imgAsDataURL=imgCanvas.toDataURL("image/png");
        //保存到本地存储中
        //使用try-catch()查看是否支持localstorage
        try {
            localStorage.setItem(key,imgAsDataURL);//将取出的图片存放到localStorage
        }catch(e) {
            console.log("Storage failed:"+e);//存储失败
        }
    },false);
    img.src=key;
}
/**
 * [getImg 从本地缓存获取图片并且渲染]
 * @param  {[type]} key [localStorage中的键名称]
 * @return {[type]}     [存储值-base64的字符串]
 */

function getImg(key) {
    var srcStr = localStorage.getItem(key);//从localStorage中取出图片
    console.log(getImgArr);
    getImgArr.push(srcStr);

}

附上代码截图:

图片说明
图片说明

1个回答

第一次访问没有那个键肯定localStorage返回null了。。搞清楚执行循序先。

xiezhihai7
xiezhihai7 回复无聊码农: 那这要怎么处理,把资源分开来放吗?
大约 4 年之前 回复
xiezhihai7
xiezhihai7 那这要怎么处理,把资源分开来放吗?
大约 4 年之前 回复
xiezhihai7
xiezhihai7 回复无聊码农: 因为A\B页面有些地方引用了相同的img src,这样键名称就会相同
大约 4 年之前 回复
showbo
支付宝加好友偷能量挖 回复无聊码农: 不过你图片地址不都是唯一的,干嘛不同页面还另外缓存一次?
大约 4 年之前 回复
showbo
支付宝加好友偷能量挖 回复无聊码农: 不会冲突
大约 4 年之前 回复
showbo
支付宝加好友偷能量挖 回复xiezhihai7: 其不同的键名称,键名称为“location.pathname+图片地址“这种格式就会冲突了
大约 4 年之前 回复
xiezhihai7
xiezhihai7 我现在是判断是否有localstorage,有则读取,没有则从服务器读取;但是现在有一个问题:2个页面的情况下,都做了localStorage缓存处理,并且2个页面之间的图片很多是关联的(路径相同),在切换页面的时候如何处理,能使在A页面存储的数据不影响B页面?
大约 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐