如何解决如何为多个动态 Div 设置多个 Cookie
希望帮助为多个动态 div 设置多个 cookie。
我可以为 1 个 div 设置 1 个 cookie,但是,当我将超过 1 个项目/div 添加到购物车时,cookie 只会在第一个子/div 上设置。
添加到购物车中的 div 数量将始终未知并动态生成...如何为每个添加的购物车项目创建唯一的 cookie?
非常感谢您的时间和帮助!任何帮助将不胜感激, 史蒂夫。
此处提供代码
$('#bag_active').on('click','.add-to-cart',function setCookie() {
alert("COOKIES SET");
var customObject = {};
customObject.name = document.getElementById("cart_product_name").value;
customObject.price = document.getElementById("cart_product_price").value;
var jsonString = JSON.stringify(customObject);
document.cookie = "cookieObject=" + jsonString;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="bag_active" class="product-card">
<h1 class="title">Cookie Title 1</h1>
<h2 class="subtitle">Cookie Price 1</h2>
<button id="1" type="button" class="btn add-to-cart" aria-pressed="true" onclick="setCookie()">Add to Bag</button>
<input type="hidden" id="cart_product_name" name="Cookie Name 1" value="Cookie Name 1">
<input type="hidden" id="cart_product_price" name="Cookie Price 1" value="Cookie Price 1">
</div>
<div id="bag_active" class="product-card">
<h1 class="title">Cookie Title 2</h1>
<h2 class="subtitle">Cookie Price 2</h2>
<button id="2" type="button" class="btn add-to-cart" aria-pressed="true" onclick="setCookie()">Add to Bag</button>
<input type="hidden" id="cart_product_name" name="Cookie Name 2" value="Cookie Name 2">
<input type="hidden" id="cart_product_price" name="Cookie Price 2" value="Cookie Price 2">
</div>
<div id="bag_active" class="product-card">
<h1 class="title">Cookie Title 3</h1>
<h2 class="subtitle">Cookie Price 3</h2>
<button id="3" type="button" class="btn add-to-cart" aria-pressed="true" onclick="setCookie()">Add to Bag</button>
<input type="hidden" id="cart_product_name" name="Cookie Name 3" value="Cookie Name 3">
<input type="hidden" id="cart_product_price" name="Cookie Price 3" value="Cookie Price 3">
</div>
解决方法
我假设您将点击处理程序重写为:
// some cookie helpers in vanilla-js. or you can use a library to work with cookies
function getCookie(name,text) {
if (typeof text !== 'string') return null
var nameEQ = `${name}=`
var ca = text.split(/[;&]/)
for (var i = 0; i < ca.length; i += 1) {
var c = ca[i]
while (c.charAt(0) === ' ') {
c = c.substring(1,c.length)
}
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length,c.length)
}
}
return null
}
function parseCookie(cookie) {
try {
return JSON.parse(cookie)
} catch (err) {
return null
}
}
// --- end cookie helpers ---
$('#bag_active').on('click','#checkout_button',function setCookie() {
var cookieObject = parseCookie(getCookie('cookieObject',document.cookie)) || { orders: [] }
if (!Array.isArray(cookieObject.orders)) throw new Error('Malformed cookie!')
var newOrder = {}
newOrder.name = document.getElementById("cart_product_name").value
newOrder.price = document.getElementById("cart_product_price").value
cookieObject.orders.push(newOrder)
var jsonString = JSON.stringify(cookieObject)
document.cookie = "cookieObject=" + jsonString
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。