localStorage保存加入购物车信息

最新推荐文章于 2023-04-18 20:36:17 发布

五个小鬼

最新推荐文章于 2023-04-18 20:36:17 发布

阅读量722

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44476265/article/details/110557077

版权

localStorage属性
JavaScript存储对象（即前端使用）
localStorage和sessionStorage允许在浏览器中存储key/value对的数据
loacalStorage用户长久保存整个网站的数据，保存的数据没有过期时间，直接手动删除
localStorage属性为只读
浏览器支持：ie8,谷歌4.0，火狐3.5
语法：window.localStorage
保存数据：localStorage.setItem(“key”,“value”);
读取数据：localStorage.getItem(“key”);
删除数据：localStorage.removeItem(“key”);
返回值：一个存储对象
如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
JSON.parse()
将一个json字符串转化为对象

JSON.stringify()
将javaScript值(通常为对象或数组)转为json字符串
优势：
1.扩展了cookie 的4k限制
2.localStorage会将第一次请求的数据直接存储到本地，相当于一个5M大小的前端数据库，相对于cookie可节约宽带
缺点：
1.浏览器要求版本高，支持的浏览器版本有 ie8,谷歌4.0，火狐3.5以上
2.localStorage保存的数据没有过期时间，需手动删除
3.localStorage保存类型为key/value,value值类型现阶段只能为String类型，日常的json对象需要转换
4.localStorage在浏览器隐私模式下不可读取
5.localStorage本质为字符串的读取，如存储内容过多，会消耗内存空间，导致页面卡顿
6.localStorage不能被爬虫抓取到

localStorage获取删除信息

//当前用户主键（从cookie中获取）
var current_userid=sessionStorage.getItem("current_userid");
var setExpireTime=true;
/*
 * 设置用户信息，和过期时间
 * */
function setLocalStorageData(data,expireTime){
	if(setExpireTime){
		var userJson = localStorage.getItem(current_userid)?JSON.parse(localStorage.getItem(current_userid)):{};
		//isValid:是否实例化即是否含有效句柄
		if(isValid(userJson)){
			var expireJson = userJson["expire_time"];
			if(isValid(expireJson)){
				expireJson={settime:new Date(),keeptime:expireTime};
			}else{
				expireJson.settime=new Date();
				expireJson.keeptime=expireTime;
			}
		}else{
			var expireJson={settime:new Date(),keeptime:expireTime};
		}
		data.expire_time=expireJson;
		//JSON.stringify(data) 将对转化为json字符串
		localStorage.setItem(current_userid,JSON.stringify(data));
	}
}

//获取用户指定字段信息
function getLocalStorageData(name){
	if(setExpireTime){
		var userJson = localStorage.getItem(current_userid)?JSON.parse(localStorage.getItem(current_userid)):{};
		//isValid:是否实例化即是否含有效句柄
		if(isValid(userJson)){
			var expireJson = userJson["expire_time"];
			if(isValid(expireJson)){
				var settime = newDate(expireJson["settime"]).getTime();
				var keeptime = expireJson["keeptime"];
				keeptime=keeptime*24*60*60*10000;
				var newtime=new Date().getTime();
				if(settime+keeptime<newtime){
					console.log("删除失效数据");
					localStorage.removeItem(current_userid);//删除失效数据
					return null;
				}
			}
			if(isValid(userJson[name])){
				return userJson[name];
			}else{
				return null;
			}
		}else{
			return null;
		}
	}
}

//获取当前用户所有信息
function getLocalStorageUserData(){
	if(setExpireTime){
		var userJson = localStorage.getItem(current_userid)?JSON.parse(localStorage.getItem(current_userid)):{};
		//isValid:是否实例化即是否含有效句柄
		if(isValid(userJson)){
			var expireJson = userJson["expire_time"];
			if(isValid(expireJson)){
				//getTime();返回距 1970 年 1 月 1 日之间的毫秒数
				var settime = new Date(expireJson["settime"]).getTime();
				var keeptime = expireJson["keeptime"];
				keeptime=keeptime*24*60*60*10000;
				var newtime=new Date().getTime();
				if(settime+keeptime<newtime){
					console.log("删除失效数据")
					localStorage.removeItem(current_userid);//删除失效数据
					return null;
				}
			}
			return userJson;
		}else{
			return null;
		}
	}
}

//清除当前用户所有缓存数据
function removeLocalStorageUserData(){
	if(setExpireTime){
		var userJson = localStorage.getItem(current_userid)?JSON.parse(localStorage.getItem(current_userid)):{};
		//isValid:是否实例化即是否含有效句柄
		if(isValid(userJson)){
			localStorage.removeItem(current_userid);//删除失效数据
		}
	}
}

function isValid(obj){
	if(obj=='[object Object]'){//判断是否为对象
		if(jQuery.isEmptyObject(obj)){//检查对象是否为空
			return false;
		}else{
			return true;
		}
	}else{
		if(null==obj || undefined==obj || ""==obj || "null"==obj || "undefined"==obj){
			return false;
		}else{
			return true;
		}
	}
	
}

加入购物车（已添加课程为例）
event.cancelBubble取消事件冒泡，防止子元素触发父级元素的click事件

//加入购物车
function add_to_shopping_car(obj){
	this.event.cancelBubble = true;//控制只触发自己的click；
	var courseId = $(obj).attr("id");
	//获取当前用户存储在localStorage中的所有信息
	var userInfoArray = getLocalStorageUserData();
	//当前用户购物车课程总数
	var allCarNum=0;
	if(isValid(userInfoArray)){
		allCarNum = isValid(userInfoArray.allCarNum)?userInfoArray.allCarNum:0;
	}else{
		//若无当前用户信息，先创建当前用户
		userInfoArray={
			"current_userid":current_userid
		};
	}
    /* "carInfo": [{"course_id": "1","couser_num": 1},
     			{"course_id": "2","couser_num": 2}]
     */
    var carArray = isValid(userInfoArray.carInfo)?userInfoArray.carInfo:[];
    if(isValid(carArray)){
    	for(var i=0;i<carArray.length;i++){
        	if(carArray[i].course_id==courseId){
        		carArray[i].course_num=carArray[i].course_num+1;
        		break;
        	}
        }
        //购物车中无当前选课课程（课程管理单科课程数量有且仅有一个即可）
        if(i==carArray.length){
        	var couserInfo={
        			"course_id":courseId,
        			"course_num":1
        	}
        	carArray.push(couserInfo);
        }
    }else{
    	carArray=[{
			"course_id":courseId,
			"course_num":1
    	}];
    	userInfoArray.carInfo=carArray;
    }
    if(allCarNum==0){
    	userInfoArray.allCarNum=1;
    }else{
    	userInfoArray.allCarNum=allCarNum+1;
    }
    setLocalStorageData(userInfoArray,7);//有效时间为7天
}

删除购物车信息

//购物车中单项的删除
function removeCourseCart (obj){
	var courselisti = $(obj).closest('.courselisti');
	//获取要删除的课程id
	var courseid = $(courselisti[0]).find("input[type=checkbox]").attr("id");
	var userInfoArray = getLocalStorageUserData();
	var carArray=[];
	var allCarNum=0;
	if(isValid(userInfoArray)){
		 carArray = isValid(userInfoArray.carInfo)?userInfoArray.carInfo:[];
		 allCarNum = isValid(userInfoArray.allCarNum)?userInfoArray.allCarNum:0;
	}
	if(isValid(carArray)){
		for(var i=0;i<carArray.length;i++){
			if(courseid==carArray[i].course_id){
				carArray.splice(i,1);
			}
        }
		if(allCarNum>0){
			userInfoArray.allCarNum=allCarNum-1;
		}else{
			userInfoArray.allCarNum=allCarNum;
		}
		setLocalStorageData(userInfoArray,7);
	}
	//删除页面课程信息
	$(courselisti[0]).remove();
	//计算总金额
	//checked_course_price();
}


//删除选中数据
function remove_checked_courses(obj){
	var seldatas = checked_datas(".coursedata input[type='checkbox']:checked");
	var userInfoArray = getLocalStorageUserData();
	var carArray=[];
	var allCarNum=0;
	if(isValid(userInfoArray)){
		 carArray = isValid(userInfoArray.carInfo)?userInfoArray.carInfo:[];
		 allCarNum = isValid(userInfoArray.allCarNum)?userInfoArray.allCarNum:0;
	}
	if(isValid(seldatas)){
		if(isValid(carArray)){
			for(var i=0;i<seldatas.length;i++){
				var courseId= seldatas[i].course_id;
				for(var j=0;j<carArray.length;j++){
					if(courseId==carArray[j].course_id){
						carArray.splice(j,1);
						$("#"+courseId+"").parent().parent().remove();
						if(allCarNum>0){
							allCarNum--;
						}
					}
		        }
			}
			userInfoArray.allCarNum=allCarNum;
			setLocalStorageData(userInfoArray,7);
		}
		//计算总金额
		//checked_course_price();
	}else{
		alert("请先选择需要删除的课程")
	}
}

//获取选中的数据
function checked_datas(selecter_name){
	var seldatas = [];
	$(selecter_name).each(function (){
		var ele = $(this);
		var selid = ele.attr('id');
		if(selid != undefined && selid != ''){
			var selectData={
				course_id:selid,
				num:1
			}
			seldatas.push(selectData);
		}
	});
	return seldatas;
	
}

五个小鬼

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
localStorage保存加入购物车信息

localStorage属性JavaScript存储对象（即前端使用）localStorage和sessionStorage允许在浏览器中存储key/value对的数据loacalStorage用户长久保存整个网站的数据，保存的数据没有过期时间，直接手动删除localStorage属性为只读浏览器支持：ie8,谷歌4.0，火狐3.5语法：window.localStorage保存数据：localStorage.setItem(“key”,“value”);读取数据：localStorage.
复制链接

扫一扫