显示和删除Javascript中的多个Cookie [英] Display and delete multiple cookies in Javascript

问题描述

我想使用javascript cookie在网站上显示最后三个搜索值。我存储最后三个值，但是当我在视图中显示时，它会同时显示所有内容。我有两个问题。

1. 我想在 href 中分别显示值。因此用户可以单击并再次搜索。

实际输出

 < a href = abc.com?location=1=Dubai; 2 = India; 3 = SriLanka> 1 = Dubai; 2 =印度； 3 = SriLanka< span class ='rmvcookie'> x< / span>< / a> 
  

预期产量

 < a href ='abc.com？location = Dubai'> Dubai< / a< span class ='rmvcookie'> x< / span> 
< a href ='abc.com？location = India'>印度< / a>< span class ='rmvcookie'> x< / span> 
< a href =‘abc.com？location = SriLanka’> SriLanka< / a>< span class ='rmvcookie'> x< / span> 
  

2. 我创建了 removeCookies 函数，但它会一次删除所有cookie。我想单独删除Cookie。

此网站也是如此。

解决方案

我在codepen上写了一个解决方案- https://codepen.io/darius9171/pen/JBBRaz

Stackoverflow不允许您在包含Cookie的代码段中工作，但需要当您指定指向代码笔的链接时，您可以编写代码。因此，请不要注意代码段：D

  // set cookiesconst cookies = ['Dubai'，'India'，'SriLanka']; cookies.forEach（（name，i）=> document.cookie =`$ {i + 1} = $ {name};））; // renderconst list = document.querySelector（'。list'）; document.cookie.split（';'）.forEach（cookie => {const pair = cookie.split（'='）; list.innerHTML + =`< ; div class = cookie data-name = $ {pair [0]}> $ {pair [1]}< span class ='rmvcookie'> x< / span>< / div>` }）document.querySelectorAll（'。rmvcookie'）。forEach（span => {span.addEventListener（'click'，（event）=> {const parent = event.currentTarget.parentNode; document.cookie =`$ { parent.dataset.name} =; expires = Thu，1970年1月1日格林尼治标准时间;`; parent.parentNode.removeChild（parent）;}）}） 

  span {color：blue;光标：指针；}  

 < div class = list >< / div>  

I want to display the last three search values on the website using javascript cookies. I store last three values but when I display in view it displays everything together. I have two question.

1. I want to display the values separately inside the href. So the user can click and search again.

Actual output

<a href="abc.com?location=1=Dubai; 2=India; 3=SriLanka">1=Dubai; 2=India; 3=SriLanka <span class='rmvcookie'>x</span></a>

Expecting output

<a href='abc.com?location=Dubai'>Dubai</a><span class='rmvcookie'>x</span>
<a href='abc.com?location=India'>India</a><span class='rmvcookie'>x</span>
<a href='abc.com?location=SriLanka'>SriLanka</a><span class='rmvcookie'>x</span>

2. I created removeCookies function but it removes all the cookies at once. I want to remove the cookies individually.

This website does the same. makemytrip.ae/holidays-india Search by any destination. It stores the values and you can remove it individually. I tried last two days and couldn't get the right code. Can anyone help me? Please.

JavaScript

var num = 1;

function addCookie() {
  var searchvalue = document.getElementsByClassName("cookiename")[0].value;
  document.cookie = num + "=" + searchvalue;

  if (num >= 3) { //Limit for last three search value
    num = 1;
  } else {
    num++;
  }

  var result = document.cookie;
  document.getElementById("list").innerHTML = "<a href='abc.com?location=" + result + "'>" + result + "</a> <span class='rmvcookie' onclick='removeCookies()'>x</span>";
}

function listCookies() {
  var result = document.cookie;
  document.getElementById("list").innerHTML = "<a href='abc.com?location=" + result + "'>" + result + "</a> <span class='rmvcookie' onclick='removeCookies()'>x</span>";
}

window.onload = function() {
  listCookies();
};

function removeCookies() {
  var res = document.cookie;
  var multiple = res.split(";");
  for (var i = 0; i < multiple.length; i++) {
    var key = multiple[i].split("=");
    document.cookie = key[0] + "=; expires=Thu, 28 May 2030 00:00:00 UTC";
  }
}

HTML

<input type="text" id="searchTxt" class="cookiename" name="asd">
<button onclick='addCookie()'>ADD</button><br>
<button onclick='removeCookies()'>REMOVE</button>
<h1>Cookies List</h1>
<p id="list"></p>

View

解决方案

I wrote a solution on codepen - https://codepen.io/darius9171/pen/JBBRaz

Stackoverflow does not allow you to work in snippets with cookies, but requires you to write code when you specify a link to codepen. So don't pay attention to the snippet :D

//set cookies
const cookies = ['Dubai', 'India', 'SriLanka'];
cookies.forEach((name, i) => document.cookie = `${i+1}=${name};`);

//render
const list = document.querySelector('.list');
document.cookie.split('; ').forEach(cookie => {
  const pair = cookie.split('=');
  
  list.innerHTML += `<div class="cookie" data-name="${pair[0]}">${pair[1]} <span class='rmvcookie'>x</span></div>`
})

document.querySelectorAll('.rmvcookie').forEach(span => {
  span.addEventListener('click', (event) => {
    const parent = event.currentTarget.parentNode;
    document.cookie = `${parent.dataset.name}=; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
    parent.parentNode.removeChild(parent);
  })
})

span {
  color: blue;
  cursor: pointer;
}

<div class="list">
</div>

这篇关于显示和删除Javascript中的多个Cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！