购物车如何实现？用什么技术

2023-02-21 20:39:01JavaScript06

购物车如何实现？用什么技术,第1张

1. cookie

cookie是由服务器产生，存储在客户端的一段信息。它定义了一种Web服务器在客户端存储和返回信息的机制，cookie文件它包含域、路径、生存期、和由服务器设置的变量值等内容。当用户以后访问同一个Web服务器时，浏览器会把cookie原样发送给服务器。通过让服务器读取原先保存到客户端的信息，网站能够为浏览者提供一系列的方便，例如在线交易过程中标识用户身份、安全要求不高的场合避免用户重复输入名字和密码、门户网站的主页定制、有针对性地投放广告等等。利用cookie的特性，大大扩展了WEB应用程序的功能，不仅可以建立服务器与客户机的联系，因为cookie可以由服务器定制，因此还可以将购物信息生成cookie值存放在客户端，从而实现购物车的功能。用基于cookie的方式实现服务器与浏览器之间的会话或购物车，有以下特点：

n cookie存储在客户端，且占用很少的资源，浏览器允许存放300个cookie，每个cookie的大小为4KB，足以满足购物车的要求，同时也减轻了服务器的负荷；

n cookie为浏览器所内置，使用方便。即使用户不小心关闭了浏览器窗口，只要在cookie定义的有效期内，购物车中的信息也不会丢失；

n cookie不是可执行文件，所以不会以任何方式执行，因此也不会带来病毒或攻击用户的系统；

n 基于cookie的购物车要求用户浏览器必须支持并设置为启用cookie，否则购物车则失效；

n 存在着关于cookie侵犯访问者隐私权的争论，因此有些用户会禁止本机的cookie功能。

2. session

session是实现购物车的另一种方法。session提供了可以保存和跟踪用户的状态信息的功能，使当前用户在session中定义的变量和对象能在页面之间共享，但是不能为应用中其他用户所访问，它与cookie最重大的区别是，session将用户在会话期间的私有信息存储在服务器端，提高了安全性。在服务器生成session后，客户端会生成一个sessionid识别号保存在客户端，以保持和服务器的同步。这个sessionid是只读的，如果客户端禁止cookie功能，session会通过在URL中附加参数，或隐含在表单中提交等其他方式在页面间传送。因此利用session实施对用户的管理则更为安全、有效。

同样，利用session也能实现购物车，这种方式的特点是：

n session用新的机制保持与客户端的同步，不依赖于客户端设置；

n 与cookie相比，session是存储在服务器端的信息，因此显得更为安全，因此可将身份标示，购物等信息存储在session中；

n session会占用服务器资源，加大服务器端的负载，尤其当并发用户很多时，会生成大量的session，影响服务器的性能；

n 因为session存储的信息更敏感，而且是以文件形式保存在服务器中，因此仍然存在着安全隐患。

3. 结合数据库的方式

这也是目前较普遍的模式，在这种方式中，数据库承担着存储购物信息的作用，session或cookie则用来跟踪用户。这种方式具有以下特点：

n 数据库与cookie分别负责记录数据和维持会话，能发挥各自的优势，使安全性和服务器性能都得到了提高；

n 每一个购物的行为，都要直接建立与数据库的连接，直至对表的操作完成后，连接才释放。当并发用户很多时，会影响数据库的性能，因此，这对数据库的性能提出了更高的要求；

n 使cookie维持会话有赖客户端的支持。

无所谓。

某宝用的方法是，把商品信息存入cookie，打开页面，就会显示，但，却不能操作，账号信息并没存入到cookie中。

只存ID的话，如果此时商家把此商品删除。可能用户就搜不到了。应该把该商品信息一并存起来，让用户能看到。只是在操作时，再告诉用户，此数据是否还存在。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<div>移入收藏夹</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<div>移入收藏夹</div>

</div>

</body>

</html>

.container{

width: 1000px

margin-left: auto

margin-right: auto

color: #444444

}

.header{

margin: 8px

}

.shop-icon, .wangwang-icon, .promotion-icons span{

display:inline-block

width: 15px

height: 15px

background-color: rgb(117,192,241)

}

.promotion-icons span{

margin-right: 4px

}

.items{

border: 1px solid #ebe9e9

}

.item{

display: flex

margin: 8px

}

.item-img{

width:100px

height: 100px

display: inline-block

background-color: aquamarine

margin-left: 6px

margin-right: 6px

}

.item-name

{

display: flex

flex-direction: column

justify-content: space-between

}

.sku, .price,.item-price-total,.operation,.num-control{

margin-left: 18px

}

.num{

width: 18px

height: 15px

}

.num-control{

display: flex

align-items: baseline

}

.num-minus,.num-plus{

width: 18px

height: 22px

display: inline-block

background-color: #ebe9e9

}

.checkout{

display: flex

justify-content: space-between

}

.shop{

margin-bottom: 20px

margin-top: 30px

}

.goods,.freight,.checkout-button{

margin-left: 15px

}

.price-1{

text-decoration: line-through

color: gray

}

.check-num ,.total-price{

font-size: large

color: red

margin-left: 3px

margin-right: 3px

}

.checkout-button{

height: 30px

width: 50px

background-color: beige

}

.checkout{

margin-top: 15px

}

.item-name{

width: 25%

}

.item-price-total{

width: 5%

}

.sku{

width: 20%

}

function updatePrice(){

let items = document.querySelectorAll('.item')

let totalNum = 0

let totalPrice = 0

items.forEach(function(item){

if(item.querySelector('.item-checkbox').checked){

let num = item.querySelector('.num').value

totalNum = totalNum + parseInt(num)

let price = item.querySelector('.price-2').getAttribute('data-price')

totalPrice = totalPrice + parseFloat(price) * num

}

})

document.querySelector('.check-num').innerText= totalNum

document.querySelector('.total-price').innerText = totalPrice

}

window.onload=function(){

let itemCheckboxes = document.querySelectorAll('.item-checkbox')

itemCheckboxes.forEach(function(itemCheckbox){

itemCheckbox.onchange = function(){

updatePrice()

}

})

let minuses = document.querySelectorAll('.num-minus')

minuses.forEach(function(minus){

minus.onclick = function(event){

let num=minus.parentElement.querySelector('.num').value

if(parseInt(num)>1)

{

minus.parentElement.querySelector('.num').value=parseInt(num)-1

updatePrice()

}

})

let pluses = document.querySelectorAll('.num-plus')

pluses.forEach(function(plus){

plus.onclick = function(event){

let num=plus.parentElement.querySelector('.num').value

plus.parentElement.querySelector('.num').value=parseInt(num)+1

updatePrice()

}

})

}

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：CSS如何设置边框和边框之间的距离？

# 下一篇：怎么知道自己电脑的配置？

推荐阅读

热门文章

最新发布

标签列表

购物车如何实现？用什么技术

给您推荐相同类型的内容：