sessionStorage的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41355260/article/details/80429400

参考资料：https://www.cnblogs.com/ranyonsue/p/6402687.html

                     http://www.cnblogs.com/idche/archive/2012/03/17/2403894.html

                     https://blog.csdn.net/oaa608868/article/details/53539954

功能描述：当sessionStorage中存储了对应图片时，直接从sessionStorage中读取图片；

                  当未存储时，通过Ajax获取图片并存入sessionStorage。

var $this = $(this),
    $image = $this.closest('.options-selection').find('.image'),
    storage = window.sessionStorage,
    vfc,
    productid,
    ageVal = '',
    key = ageVal + '-' + productid + '-' + vfc,
    name = 'obj' + key,
    objStorage = JSON.parse(storage.getItem(name)),
    newImgSrc,
    newImgHref;

checkOptions($(this).val() === '');

/**
 * #0601 [CSM] website product detail page outfit quick-view
 * url: http://sharepoint.kaifenginternet.com/admin/tasks/detail-601
 * @description 
 * customer selects different swatches on the outfit items, show the correct colour image for the swatch selection
 */
if (type === 'outfit') {
    productid = $this.closest('.options-selection').find('.colors .active').data('productid');
    ageVal = $this.find('option:selected').data('group') !== undefined ? $this.find('option:selected').data('group') : '';
    vfc = $this.closest('.options-selection').find('.colors .active').data('vfc');
    objStorage = objStorage ? objStorage : {};

    if (storage.hasOwnProperty(name)) {
        newImgSrc = objStorage[key].img;
        newImgHref = objStorage[key].url;

        $image.find('img').attr('src', newImgSrc);
        $image.find('a').attr('href', newImgHref);
    } else {
        $.ajax({
            url: getUncachedUrl('/' + currentLanguage + '/Base/OutfitItemHandler'),
            type: 'POST',
            data: {
                agc: ageVal,
                vfc: vfc,
                productID: productid
            },
            success: function (data) {
                var imgHref = $image.find('a').attr('href'),
                    markPosition = imgHref.search(/\?/),
                    newImgHref = imgHref.slice(0, markPosition) + '?vfc=' + vfc,
                    newImgSrc = '/upload/images/330x330/' + data,
                    obj = {},
                    value = {},
                    key = ageVal + '-' + productid + '-' + vfc,
                    name,
                    str;

                value.img = newImgSrc;
                value.url = newImgHref;

                obj[key] = value;
                name = 'obj' + key;
                str = JSON.stringify(obj);

                storage.setItem(name, str);

                $image.find('img').attr('src', newImgSrc);
                $image.find('a').attr('href', newImgHref);
            }
        });
    }
}
});

注意：

1.JSON.parse（）的参数为有效的JSON字符串。

2.sessionStorage只能存储字符串型数据，对于数组和对象不能直接存储。通过JSON对象提供的parse和stringify将其转化成字符串，再存储到sessionStorage。