Window.localStorage购物车实现

最新推荐文章于 2024-08-15 20:33:20 发布
最新推荐文章于 2024-08-15 20:33:20 发布
阅读量1.2k 收藏 4
点赞数 2
分类专栏： 前台 localStorage 购物车 营销系统 页面本地数据存储
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjk_02027/article/details/79962994
版权

背景：

       行业内企业应用，购物车不需要保存到服务器，关闭浏览器就清空购物车。

一、API：

子功能js方法参数及示例
单个商品加入购物车myCart.addGoodgood：
{id:1, num:2, type: 1 }
商品批量加入购物车myCart.addGoodsgoods：
[{"id":"1","num":1,"type":1},
{"id":"2","num":"2","type":1}]
删除单个商品myCart.removegoodId：
1
批量删除商品myCart.removeGoodsgoodIds：
[1,3,4]
清空购物车myCart.removeAll
增减购物车某个商品的数量myCart.addGoodNum goodId=1, num=1或goodId=1, num=-2
修改购物车某个商品的数量myCart.modifyGoodNum goodId=1, num=8
查询购物车中某个商品的数量myCart.getGoodNumgoodId=1
查询购物车商品列表myCart.getGoodList 
查询购物车商品ID列表myCart.getGoodIdList 

二、上图：



然后上代码，打开页面可看到效果：

       注：1、由于使用了localStorage，需要有session.  所以必需把文件放到web容器后通过浏览器访问

              2、界面依赖JQuery.js

三、上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>LocalStorage操作</title>
    <meta name="keywords" content="isoftstone zddaia employeeNo98974">
    <meta name="description" content="author daizhongde https://blog.csdn.net/jjk_02027">
    <meta name="description" content="author 戴忠戴  QQ 413881461">
    <meta name="content-type" content="text/html; charset=UTF-8">
    

    <script src="../js/jquery-2.2.4.min.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
var myCart = {};
var myStorage = localStorage;
/* id: good dh; num: good number;  type: selfuse, jtuse, person  */
var good = {id:1, num:2, type: 1 };
var goods = [];

/**
 * judge id whether exists in cartArray 
 * @param objArray
 * @param key  id's key  eg:id
 * @param value  id's value  eg:123
 * return true: cartArray contains id key, false: not contains id key
 */
function containsKeyInArray( objArray, idkey, idvalue ){
	console.log( "containsKeyInArray: "+JSON.stringify(objArray) )
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == idvalue)
			return true;
    }
	return false;
};

/**
 * plus cart's good number which exists in cart
 * @param objArray
 * @param good  id's key  eg:id
 * @param idkey  id's value  eg:123
 * @param numkey  id's value  eg:123
 */
function plusGoodNum2Array(objArray, good, idkey, numkey){
	//
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == good[idkey] )
			objArray[i][numkey] = Number(objArray[i][numkey]) + Number(good[numkey]);
    }
	return false;

};
/** 
 * add single good to cart
 * @param good good Object 
 */
myCart.addGood = function( good ){
	console.log( "myCart.addGood: "+JSON.stringify(good) );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
// 	if( undefined == myStorage.cart || null == myStorage.cart );
// 	if( myStorage.cart ){//exist cart attribute , with cart item
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		if( !containsKeyInArray( cartArray, "id", good["id"] ) ){
			cartArray.push(good);
		}else{
			plusGoodNum2Array(cartArray, good,"id","num");
		}
		
	}else{//not exist cart attribute, no cart item
		cartArray.push(good);
	}
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
};

/**
 * good's count plus some number, minus pass negative number<br>
 * js judge, when num =1, can't minus any more.<br>
 * use page: + - operate in cart page
 * @return good's new number
 */
myCart.addGoodNum = function(goodId, num){
	console.log( "myCart.addGoodNum: goodId="+goodId+",num="+num );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
// 	if( undefined == myStorage.cart || null == myStorage.cart );
// 	if( myStorage.cart ){//exist cart attribute , with cart item
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		for(var i = 0; i < cartArray.length; i++) {
			if( cartArray[i]["id"] == goodId ){
				cartArray[i]["num"] = Number(cartArray[i]["num"]) + Number( num );
				break;
			}
	    }
	}
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
	return cartArray[i]["num"];
};

/** 
 * add multiply good to cart
 * with problem , wait for solve ........
 * @param good goods Object Array
 */
myCart.addGoods = function( goods ){
	console.log("myCart.addGoods: "+ JSON.stringify(goods) );
	console.log("myCart.addGoods:  goods.length="+  goods.length );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
	try {
		
		for(var i = 0; i < goods.length; i++) {
	// 		myCart.addGood( goods[i] );
			console.log("myCart.addGoods: i="+ i );
			if( cartArray.length != 0 ){//exist cart attribute , with cart item
				console.log("myCart.addGoods: i="+ i );
				if( !containsKeyInArray( cartArray, "id",  goods[i]["id"] ) ){
					cartArray.push( goods[i]);
				}else{
					console.log("myCart.addGoods: i="+ i );
					plusGoodNum2Array(cartArray,  goods[i],"id","num");
					console.log("myCart.addGoods: i="+ i );
				}
			}else{//not exist cart attribute, no cart item
				cartArray.push( goods[i]);
			}
			console.log("myCart.addGoods: cartArray="+ JSON.stringify(cartArray) );
			console.log("myCart.addGoods: goods="+ JSON.stringify(goods)+",goods.length:"+goods.length+",i:"+i );
	    }
	
	}
	catch(err) {
	    document.getElementById("error").innerHTML = err.message;
	}
	
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
};
/**
 * remove a good from cart
 */
myCart.remove = function(goodId){
	console.log("myCart.remove: "+ goodId);
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	if( cartArray.length != 0  ){//exist cart attribute , with cart item.  && containsKeyInArray( cartArray, "id", goodId )
		console.log("myCart.remove: cartArray.length != 0 && containsKeyInArray( cart, \"id\", goodId ) is true");
		console.log("myCart.remove: cartArray.length:"+cartArray.length);
		for(var i = 0; i < cartArray.length; i++) {
			if( cartArray[i]["id"] == goodId ){
				cartArray.splice(i, 1);
				myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
				break;
			}
	    }
	}
	console.log("myCart.remove: cartArray.length != 0 && containsKeyInArray( cart, \"id\", goodId ) is false. like " +(cartArray.length != 0) + "&&"+ (containsKeyInArray( cart, "id", goodId )));
};
/**
 * remove multiply goods from cart
 */
myCart.removeGoods = function(goodIds){
	console.log("myCart.removeGoods: "+ JSON.stringify(goodIds) );
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	var removeflag = 0;
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		for(var i = 0; i < goodIds.length; i++) {
			console.log("myCart.removeGoods: "+ i);
// 			myCart.remove( goodIds[i] );
			for(var j = 0; j < cartArray.length; j++) {
				if( cartArray[j]["id"] == goodIds[i] ){
					cartArray.splice(j, 1);
					removeflag ++;
					break;
				}
		    }
	    }
		myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
	}
};
/**
 * clear cart
 */
myCart.removeAll = function(){
	myStorage.removeItem("cart");
};

/* set good's num */
myCart.modifyGoodNum = function(goodId, num )
{
   	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
   	for(var i = 0; i < cartArray.length; i++) {
   		if( cartArray[i]["id"] == goodId )
   			cartArray[i]["num"]= Number(num);
       }
   	myStorage.setItem("cart", JSON.stringify(cartArray) );
   	
};
/* get good's num */
myCart.getGoodNum = function( goodId )
{
   	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
   	for(var i = 0; i < cartArray.length; i++) {
   		if( cartArray[i]["id"] == goodId )
   			return cartArray[i]["num"];
    }
   	return 0;
};
/* get good list  */
myCart.getGoodList = function( )
{
   	return myStorage.cart ? myStorage.getItem("cart") : "";
};
/* get good id list  */
myCart.getGoodIdList = function( )
{
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	var goodIdList = cartArray.map(function(v){return v.id;});
	return goodIdList;
};
/**
 * find other attribute's value by primary key id
 * @param objArray
 * @param key  id's key  eg:id
 * @param numKey  target value's key  eg:8
 * return target value
 */
function getAttrValueByKey( objArray, idkey,idvalue, attrName ){
	console.log( "getAttrValueByKey: "+JSON.stringify(objArray) )
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == idvalue)
			return objArray[i][attrName];
    }
	return "";
};


function refreshTextarea(){
	//refresh cart data
	$('#cart').val(myStorage.cart ? myStorage.getItem("cart").replace(/\}\,\{/g, decodeURI("},\n{")) : "");
	
	var goodIdList = myCart.getGoodIdList();
	//refresh goodIdList data
	$('#goodIdList').val( goodIdList );
};


function add2Storage(){
	myCart.addGood({'id':$('#addspid').val(), 'num': Number($('#spnum').val()),'type':1 } );  
	refreshTextarea();
};
function batchAdd2Cart(){
	console.log("batchAdd2Cart: "+ JSON.stringify( JSON.parse($('#goods').val()) ) );
	myCart.addGoods( JSON.parse($('#goods').val()) ); 
	refreshTextarea();
};

function batchRemoveCart(){
	console.log("batchRemoveCart: "+ JSON.stringify($('#removespidlist').val().split(',')) );
	myCart.removeGoods( $('#removespidlist').val().split(',') ); 
	refreshTextarea();
};
/* good id key enter event */
function enterKeyDown(event)
{
    if(event.keyCode==13)
    {
//     	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
//     	var num = getAttrValueByKey( cartArray, "id", $('#plusGoodId').val(), "num" );
    	var num = myCart.getGoodNum($('#plusGoodId').val());
    	console.log("num:"+num);
    	$('#goodNum').val( num );
	}
};
/* good number key enter event */
function enterKeyDown2(event, obj )
{
    if(event.keyCode==13)
    {
    	myCart.modifyGoodNum($('#plusGoodId').val(), Number(obj.value) );
    	refreshTextarea();
	}
};
/* good number input change event */
function goodNumChange( obj )
{
   	myCart.modifyGoodNum($('#plusGoodId').val(), Number(obj.value) );
   	refreshTextarea();
};
</script>
</head>
<body οnlοad="refreshTextarea()">
<fieldset title="加入购物车"><legend>加入购物车</legend>
请输入商品ID：<input type="text" id="addspid" name="spid" value="1"/>
请输入购买数量：<input type="text" id="spnum" name="spnum" value="1" style="width:30px"/>
<input type="button" name="add" value="加入购物车" οnclick="add2Storage()"/>

<br/><br/>
<textarea id="goods" rows="3" cols="40">
[{"id":"1","num":1,"type":1},
{"id":"2","num":"2","type":1}]
</textarea>
<input type="button" name="add" value="批量加入购物车" οnclick="batchAdd2Cart()"/>
</fieldset>

<fieldset title="删除商品"><legend>删除商品</legend>
请输入商品ID：<input type="text" id="removespid" name="removespid" value="1"/>
<input type="button" name="remove" value="从购物车移除" οnclick="myCart.remove( $('#removespid').val() );  refreshTextarea();"/>

<br/><br/>
请输入商品ID列表：<input type="text" id="removespidlist" name="removespidlist" value="1,2"/>*逗号分隔
<input type="button" name="remove" value="（批量）移除" οnclick="batchRemoveCart()"/>

<br/><br/>
<input type="button" name="remove" value="清空购物车" οnclick="myCart.removeAll();  refreshTextarea();"/>
</fieldset>


<fieldset title="修改数量"><legend>修改数量</legend>
购物车操作：请输入商品ID
<input type="text" id="plusGoodId" name="plusGoodId" value="1"  οnkeydοwn="enterKeyDown(event)"/>
<input type="button" name="minus" value="-" οnclick="myCart.addGoodNum( $('#plusGoodId').val(), -1 ); $('#goodNum').val( Number($('#goodNum').val())-1 ); refreshTextarea();" />
<input type="text" id="goodNum" name="goodNum" value="1" style="width:30px"  οnchange="goodNumChange(this)" />
<!-- οnkeydοwn="enterKeyDown2(event,this)" -->
<input type="button" name="plus" value="+" οnclick="myCart.addGoodNum( $('#plusGoodId').val(), 1 );  $('#goodNum').val( Number($('#goodNum').val()) +1 ); refreshTextarea();"/>
*输入商品ID或数量后请按回车
</fieldset>

<fieldset title="查看购物车"><legend>查看购物车</legend>
	<table  border="1">
		<thead>
			<tr>
				<th>localStroage 的Cart 数据</th>
				<th>商品ID列表</th>
				<th>error</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><textarea id="cart" rows="8" cols="30"></textarea></td>
				<td><textarea id="goodIdList" rows="8" cols="30"></textarea></td>
				<td><textarea id="error" rows="8" cols="30"></textarea></td>
			</tr>
		</tbody>
	</table>
</fieldset>
</body>
</html>


四、参考文档

Window.localStorage技术参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

飞火流星02027
关注
专栏目录
基于localStorage的本地存储XSS
9ian1i
02-16 4889
0x00 什么是localStorageHTML5 提供了两种新的本地存储方案，sessionStorage和localStorage，统称WebStorage。 顾名思义： sessionStorage 是针对session的数据存储，关闭窗口后删除。 localStorage 是一个本地的没有时间限制的数据存储。它们同样遵循SOP。0x01 什么是基于localStorage的XSS现在越
JavaScript localStorage本地存储的简单使用
AKGWSB 's blog
07-17 2044
在web编程中，经常要持久存储用户的一些信息，比如购物车，收藏夹，设置等待信息 之前的博客已经提到有两种存储用户信息的方法，cookie和session session存储在服务端，会带来服务器内存开销，主要存储用户不能篡改的敏感数据 cookie存储在本地，每次访问站点都带上cookie，会带来额外带宽的开销 上述两种方式都是【要和服务器进行数据交换】的情况下，我们会采用。 可是如果一种应用不需要和服务器进行数据交互，比如网页的偏好设置（字体大小，语言，界面样式等），我们希望用户本地自己保存这些偏好设
localStorage实现本地购物车
04-17
背景： 行业内企业应用，购物车不需要保存到服务器，关闭浏览器就清空购物车。 实现方法： 单个商品加入购物车｜ 商品批量加入购物车｜ 删除单个商品｜ 批量删除商品｜ 清空购物车｜ 增减购物车某个商品的数量｜ 修改购物车某个商品的数量｜ 查询购物车中某个商品的数量｜ 查询购物车商品列表｜ 查询购物车商品ID列表｜
基于jQuery的localStorage购物车.zip
02-24
基于jQuery3.4.1版本的localStorage购物车,注意将jQuery和html放在同一目录下
深入浅出 localStorage 存储：浏览器本地存储的利器
最新发布
weixin_63490470的博客
08-15 1411
localStorage 是 HTML5 中引入的一种新的本地存储机制，它允许网页在用户浏览器中存储键值对数据，并且这些数据在浏览器关闭后仍然可以保留。localStorage 存储为开发者提供了在客户端存储数据的便捷方式，可以用于缓存数据、保存用户偏好、实现离线功能等，极大地提升了 Web 应用的性能和用户体验。
localStorage保存加入购物车信息
weixin_44476265的博客
12-03 770
localStorage属性 JavaScript存储对象（即前端使用） localStorage和sessionStorage允许在浏览器中存储key/value对的数据 loacalStorage用户长久保存整个网站的数据，保存的数据没有过期时间，直接手动删除 localStorage属性为只读 浏览器支持：ie8,谷歌4.0，火狐3.5 语法：window.localStorage 保存数据：localStorage.setItem(“key”,“value”); 读取数据：localStorage.
使用LocalStorage 实现购物车数据永久存储
XYXYYDD的博客
09-13 341
1.定义一个 setLocalCartList 方法用于设置 cartList 里面的数据，数据存储一般要JSON格式，所以进行转化，本地存储的 cartList 数据等于 vuex里的 cartList 数据 只要每个数据改变都调用一下这个方法 2.定义一个getLocaCartList 方法用于获取本地存储，没有则返回空对象 vuex中的 cartList 等于本地存储的cartList数据 ...
localstorage用法及拓展
m0_61701551的博客
07-21 3007
localstorage用法及拓展sessionStorage和cookie
购物车数据加加减减完了页面不能实时更新必须要手动刷新 const shop_list = JSON.parse( window.localStorage.getItem("shop_list") || "[]" ) as TypeList[]; const jian = (obj: TypeList) => { const index = shop_list.findIndex((item) => item.id === obj.id); console.log(index); if (shop_list[index].num === 1) { (shop_list[index].num = 1), alert("最少为一个"); } else { shop_list[index].num--; } window.localStorage.setItem("shop_list", JSON.stringify(shop_list)); };
07-08
根据你提供的代码，购物车数据的加减操作已经实现，但页面不能实时更新，需要手动刷新才能看到最新的数据。要实现实时更新，你可以在数据发生变化的地方调用一个更新页面的函数。例如，在 `jian` 函数中，在 `window...
我数据已经存到本地了 但是这个代码拿不到数据<template> <div> <van-card :thumb="shop_list.img" /> </div> </template> <script lang="ts" setup> interface TypeList { name: string; age: number; id: string | number; title: number; } const shop_list = window.localStorage.getItem("shop_list") || []; </script> <style></style>
07-08
由于您在初始化 `shop_list` 时使用了逻辑或运算符 `||`，当 `window.localStorage.getItem("shop_list")` 返回 `null` 或 `undefined` 时，将会赋值空数组给 `shop_list`。这将导致 `shop_list` 的类型被推断为一个...
JavaScript基础之localStorage以及简单实现购物车功能
qq_37016677的博客
03-27 1629
1.localStorage是什么 localStorage是HTML5里新加入的新特性，这个是作为一种本地存储功能来使用的，解决了cookit只有4kb的存储空间导致空间不足的问题，在浏览器当中localStorage的大小一般为5M，当然在不同的浏览器当中大小也不同。 2.购物车功能的实现 1.实现购物车的“增删改查”功能 ------------------------------封...
关于localStorage存储、读取、清除数据以及与sessionStorage的区别问题
upStar1的博客
02-21 4599
1.localStorage存储 window.localStorage.setItem('key',value) 但有时value为一个对象Object，以上面的方式写入，会出现读取的返回值为{object Object}的情况，但这并不是我们想要的，此时我们需要使用JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储 window.localStorage.setItem('param',JSON.stringify(Object)) 例： loc
localStorage的存储,读取,删除
weixin_44195615的博客
04-15 4627
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。 语法：window.localStorage 一、存储 window.localStorage.setItem('key',value) 二、读取 window.localStorage.getItem('key') 三、删除 window.local.
别再用错 localStorage 了！小心踩坑！
前端开发博客
06-07 1589
大家好，我是前端宝哥。在 Web 应用的客户端存储领域，localStorage API 凭借其简洁性和广泛支持，成为了开发者们的心头好。它就像一个小巧的本地仓库，让你能够直接在用户的浏览器中存储少量数据。这篇文章将带你深入了解 localStorage API 的方方面面，包括它的优势、局限性，以及在现代应用中可用的其他存储选项。localStorage 是什么？localStorage API...
利用localStorage实现购物车功能
qq_45892570的博客
09-29 839
准备好json数据 [ { "id": 1, "src": "http://img12.360buyimg.com/n7/jfs/t1/4136/40/6201/250287/5ba1f333E745fc8b9/b34c5ccc4c4fd548.jpg", "price": 1099, "name": "小米8青春版 镜面渐变AI双摄 6GB+64GB 深空灰 全网通4G" }, { "id": 2, "src": "https://img11
基于localstorage实现购物车功能
乐夫天命兮的博客
10-10 6787
本地存储localStorage 的几个语法：localStorage.setItem("key","value");//存储变量名为key，值为value的变量     localStorage.key = "value"//存储变量名为key，值为value的变量     localStorage.getItem("key");//获取存储的变量key的值www.it165.net     l...
js基础应用篇 - 实现简单购物车(localStorage)
weixin_45217584的博客
07-04 2769
购物车，按图示进行页面布局，鼠标移到列表上时，列表下方会出现购物车按钮，点击“加入购物车”，会在列表下方出现添加的商品，刷新页面时，购买商品不丢失，点击“x”，该商品会被删除。
H5的localStorage实现购物车功能
qq_22596931的博客
12-12 1913
使用LocalStorage实现购物车功能         一：明确功能需求             通京东购物商城思考购物车的相关特性。（淘宝有所不同）                  在我们使用购物车时，需要注意的是关于购物车使用的时机：登录账号前、登录账号后。                  我们会发现无论有没有登录账号，都能够往购物车中添加商品，即使当我们关闭浏览器后重新打...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞火流星02027

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值