如何为多个动态 div 设置多个 Cookie

Posted 2023-03-24

【中文标题】如何为多个动态 div 设置多个 Cookie

【英文标题】：How to Set Multiple Cookies for Multiple Dynamic Divs

【发布时间】：2021-08-13 18:50:59

【问题描述】：

希望帮助为多个动态 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>

【问题讨论】：

读取之前设置的cookie，解析，添加新信息，序列化并再次存储。

@aleksxor 非常感谢，讨厌成为那个人，哈哈，但你是怎么做到的？

【参考方案1】：

我假设您将点击处理程序重写为：

// 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
)

【讨论】：

这对于动态“添加到购物车”非常有效，当然我需要更新心理模型/工作流程，以便 cookie 存储发生在“添加到购物车”而不是“购物车提交”上，所以很有远见在你那里。谢谢❤️

我在这里提出了另一个问题，它围绕 JSON 字符串中的“删除/删除”cookie，当它们设置的项目被删除时...问题在这里：***.com/questions/67807134/… - 如果你有时间:)