Javascript 更新文档。cookie会在单击时更新所有cookie，而不仅仅是一个cookie

我正在创建一个chrome扩展，在我的应用程序中，我希望能够通过点击按钮更新Google Optimize Cookie

到目前为止，我正在使用

window.gaData[“UA-MY-ID”]中的数据项。实验

，如下所示：

window.gaData["UA-MY-ID"].experiments = {
  2kgkOYLpTiWA36wf-_Ir7Q: "0"
  JVEtsVqdQm-lZPxXQUzdQw: "0"
}

相同范围的数字/字母表示变量ID和cookie ID。 关联的cookies看起来像这样，我特别需要操纵cookies，从\u gaexp开始：

window.document.cookie”_ga=GA1.3.1001449090.1593816402；_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.0！JVEtsVqdQm lzpxquzdqw.18539.0；_gid=GA1.3.246809878.1594039125；_ga=GA1.3.1001449090.1593816402”

对此进行分解，我需要更新以下内容（但仅当我单击相应的按钮/ID时）：

<div class="variant-0-container" id="variant-0-container">
      <div class="CRO-variant-result">
        <p>Experiment ID: 2kgkOYLpTiWA36wf-_Ir7Q </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;2kgkOYLpTiWA36wf-_Ir7Q&quot;)" id="2kgkOYLpTiWA36wf-_Ir7Q">Switch variant</button>
      </div>
      
      <div class="CRO-variant-result">
        <p>Experiment ID: JVEtsVqdQm-lZPxXQUzdQw </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;JVEtsVqdQm-lZPxXQUzdQw&quot;)" id="JVEtsVqdQm-lZPxXQUzdQw">Switch variant</button>
      </div>
      </div>

_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.0！JVEtsVqdQm lzpxxqdqw.18539.0

至：

<div class="variant-0-container" id="variant-0-container">
      <div class="CRO-variant-result">
        <p>Experiment ID: 2kgkOYLpTiWA36wf-_Ir7Q </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;2kgkOYLpTiWA36wf-_Ir7Q&quot;)" id="2kgkOYLpTiWA36wf-_Ir7Q">Switch variant</button>
      </div>
      
      <div class="CRO-variant-result">
        <p>Experiment ID: JVEtsVqdQm-lZPxXQUzdQw </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;JVEtsVqdQm-lZPxXQUzdQw&quot;)" id="JVEtsVqdQm-lZPxXQUzdQw">Switch variant</button>
      </div>
      </div>

_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.1！JVEtsVqdQm lZPxXQUzdQw.18539.1

然后，我循环遍历这些数据并在DOM中显示它们。这里有一个例子：

<div class="variant-0-container" id="variant-0-container">
      <div class="CRO-variant-result">
        <p>Experiment ID: 2kgkOYLpTiWA36wf-_Ir7Q </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;2kgkOYLpTiWA36wf-_Ir7Q&quot;)" id="2kgkOYLpTiWA36wf-_Ir7Q">Switch variant</button>
      </div>
      
      <div class="CRO-variant-result">
        <p>Experiment ID: JVEtsVqdQm-lZPxXQUzdQw </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;JVEtsVqdQm-lZPxXQUzdQw&quot;)" id="JVEtsVqdQm-lZPxXQUzdQw">Switch variant</button>
      </div>
      </div>

但这似乎更新了所有的cookies。而不是通过onClick/

${key}

专门针对的那个

---

谢谢你

所有实验都存储在一个cookie中，其键为

\u gaexp

，它们在值中串联，用

分隔：

//            |        experiment A          |        experiment B          |
"_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.1!JVEtsVqdQm-lZPxXQUzdQw.18539.0"

现在，您正在用一个实验覆盖整个值，并丢失其他值。也许您可以使用
window.gaData
作为源代码再次构建完整的字符串

据我理解，这应该是可行的：

const container   = document.getElementById('variant-0-container'),
      experiments = window.gaData["UA-MY-ID"].experiments;

container.innerHTML = Object.entries(experiments)
  .filter(([key, value]) => value == 0)
  .map(([key, value]) => `
    <div class="CRO-variant-result">
      <p>Experiment ID: ${key} </p>
      <p>Variant Active: ${value}</p>
      <button class="switch-btn" id="${key}">Switch variant</button>
    </div>
  `)
  .join('');

container.querySelectorAll('.switch-btn').forEach(btn => {
  btn.addEventListener('click', () => buttonClick(btn.id));
});

function buttonClick(key) {
  const str = Object.entries(experiments)
    .map(([k, v]) => `${k}.18539.${k === key ? 1 : v}`)
    .join('!');

  const now = new Date();
  const expireTime = now.getTime() + 1000 * 60 * 60 * 24 * 365; // 1 year?
  now.setTime(expireTime);

  window.document.cookie = `_gaexp=GAX1.3.${str}; expires=${now.toGMTString()}; path=/; domain=.MYWEBSITE.co.uk`
  window.location.reload();
}

const container=document.getElementById（'variant-0-container'），
实验=window.gaData[“UA-MY-ID”]。实验；
container.innerHTML=Object.entries（实验）
.filter（（[key，value]）=>value==0）
.map（[key，value]）=>`
实验ID:${key}

活动变量：${value}

开关变型
`)
.加入（“”）；
container.querySelectorAll（'.switch btn'）.forEach（btn=>{
btn.addEventListener（'单击'，（）=>按钮单击（btn.id））；
});
功能按钮单击（键）{
const str=Object.entries（实验）
.map（[k，v]）=>`${k}.18539.${k===key？1:v}`）
.加入（“！”）；
const now=新日期（）；
const expireTime=now.getTime（）+1000*60*60*24*365；//1年？
now.setTime（expireTime）；
window.document.cookie=`_gaexp=GAX1.3.${str}；expires=${now.togmString（）}；path=/；domain=.MYWEBSITE.co.uk`
window.location.reload（）；
}
谢谢@blex！我今天要尝试一下这个解决方案，然后再回来找你。但是，是的，我意识到最初，我并不是在更新整个cookie。我需要拆分和操作cookie，然后再将这些值放回一起，然后覆盖它。非常感谢。我今天晚些时候回来报到！