Display and delete multiple cookies in Javascript

Question

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.

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>

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

Why do you expect the cookies to be in different links when you only create one? — Luca Kiebel
– Luca Kiebel, Commented Aug 5, 2018 at 10:25
@Luca I'm planning to add this in the homepage next to search input field. I display the results based on the GET method. So if they click the Dubai all Dubai packages will display. Are there any other ways to do? — acmsohail
– acmsohail, Commented Aug 5, 2018 at 11:11
This website does the same. makemytrip.ae/holidays-india Give any destination and search. It stores the values and you can remove it individually. — acmsohail
– acmsohail, Commented Aug 5, 2018 at 11:14

pryahin.v · Accepted Answer · 2018-08-05 11:49:47Z

0

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>

answered Aug 5, 2018 at 11:49

pryahin.v

3651 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

acmsohail Over a year ago

I tried this code nothing display on the browser. I checked the inspect element. It shows Uncaught TypeError error at this line list.innerHTML += '<div class="cookie" data-name="${pair[0]}">${pair[1]} <span class="rmvcookie">x</span></div>'

pryahin.v Over a year ago

you send not my code. I used template strings that use this symbol - `, but you have a string that starts and ends with a '

acmsohail Over a year ago

I tried your code still nothing shows. Same error. please check this image. ibb.co/epNXwK

pryahin.v Over a year ago

The error is that the variable list is null. do you have an item with class list in the document?

pryahin.v Over a year ago

I see, there is. Try to place the script at the end of the document.

|

Collectives™ on Stack Overflow

Display and delete multiple cookies in Javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related