DOMException: Failed to execute ‘setItem‘ on ‘Storage‘: Setting the value of ‘myCacheName‘

上传5MB多的图片，保存本地缓存时，提示存储数据超出配额，如下异常：
settings_save(o,event) is null. DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'goods_print_settings_4' exceeded the quota.

用的是 chrome，查了下资料
What is the max size of localStorage values?
https://www.geeksforgeeks.org/what-is-the-max-size-of-localstorage-values/
运行下面代码，我当前使用的 chrome 最大存储为 5MB。

 
	localStorage limit in your Browser is 
	... KBs. 
 

于是将上传图片进行压缩处理。

function file_chagne(sef) {
	var file = sef.files[0], reader = new FileReader(), imgElm = $$('#logosrc');
	if (file.size > 102400) {
		if (!confirm('当前LOGO图片'+getFileSize(file.size)+'，过大图片压缩后可能会影响清晰度。\n建议LOGO不大于100KB，是否继续上传？'));
		return;
	}

	reader.onload = function(e) {
		if (file.size > 102400) {
			resizeImage(base64);
		} else {
			showImage(e.target.result);
		}
	}
	reader.readAsDataURL(file);
}
function resizeImage(base64) {
	var img = new Image(), maxWidth = 120, maxHeight = maxWidth; // 图片尺寸最大 120px
	img.src = base64;
	img.onload = function () {
		var ig = new Image(), offsetX = 0, offsetY = 0;
		ig.src = this.src;
		
		// 仅限制图片宽度，忽略高度
		if (ig.width > maxWidth) {
			var obj = rescaleImageSize(ig.width, ig.height, maxWidth, maxHeight);
			maxWidth = obj.width;
			maxHeight = obj.height;
			offsetX = Math.round((Math.round(maxWidth)-maxWidth)/2); // 开始剪切的 x 坐标位置
		} else {
			maxWidth = ig.width;
			maxHeight = ig.height;
			offsetY = Math.round((Math.round(maxHeight) - maxHeight)/2); // 开始剪切的 y 坐标位置
		}

		var c = document.createElement('canvas'), ctx = c.getContext('2d');
		c.width = maxWidth;
		c.height = maxHeight;
		
		/******* 开始在画布上绘制图片 *******
		*	context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
		*	offsetX:	开始剪切的 x 坐标位置
		*	offsetX: 	开始剪切的 y 坐标位置
		*	maxWidth:	被剪切图像的宽度
		*	maxHeight:	被剪切图像的高度
		*************************************/
		ctx.drawImage(this, offsetX, offsetY, maxWidth, maxHeight);
		showImage(c.toDataURL(file.type));
	}
}