CODEWITHSUNDEEP
javascripthtmllocal-storage
majed
majed

Reputation: 55

Button for each item in localstorage

How to add button for each item in localstorage to remove that item? I have code for setItem and getItem from localstorage, but I don't know how I can add a button or x for each item to remove it.

2020-03-01 March x

2020-04-01 April x
It looks like add item to card or remove item from card. plz help me 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#inpkey").datepicker();
        });
    </script>
    <style>
        fieldset{
            margin-bottom:20px;
        }
        input{
            padding: 7px;
            height:40px;
        }
    </style>
</head>
<body>
    <fieldset>
        <input type="text" id="inpkey" placeholder="Click and select date">
        
        <input type="text"  id="inpvalue">
        <button type="button" id="btninsert">Save</button>
    </fieldset>
    <fieldset>
        <div id="output"></div>
    </fieldset>

    <script>
        const inpkey = document.getElementById("inpkey");
       
        const inpavv = document.getElementById("inpvalue");
        const spara = document.getElementById("btninsert");
        const output = document.getElementById("output");
        spara.onclick = function () {
            const key = inpkey.value;
            const value = inpavv.value;
           
            console.log(key);
            console.log(value);
             
            if (key && value ) {
                localStorage.setItem(key, value  );

                location.reload();
            }
        };
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value = localStorage.getItem(key);
            console.log(localStorage.getItem(key));
            output.innerHTML += `${key}:&nbsp&nbsp&nbsp&nbsp  ${value} <p />`;

        }
    </script>

</body>

</html>

Upvotes: 1

Views: 539

Answers (2)

xdeepakv
xdeepakv

Reputation: 8135

A better solution to build elements dynamically.

const app = document.getElementById("app");

const localStorage = [1, 2, 3, 4];

for (let index = 0; index < localStorage.length; index++) {
  // const key = localStorage.key(index);
  // const value = localStorage.getItem(key);

  let div = document.createElement("div");
  div.className = "cart_item";
  div.id = "cart_item_" + index;
  div.textContent = localStorage[index] + new Date().toUTCString() + "";
  let cross = document.createElement("span");
  cross.className = "cross";
  cross.textContent = "     X";
  cross.addEventListener("click", function remove() {
    alert("Remove item");
  });
  div.appendChild(cross);
  app.appendChild(div);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <link rel="stylesheet" href="app.css" />
  <!-- <script src="https://deepak-proxy-server.herokuapp.com/https://gist.githubusercontent.com/deepakshrma/4b6a0a31b4582d6418ec4f76b7439781/raw/e7377474ce9e411b4d8de4b10f4437a24774c0e2/Mapper.js"></script> -->
  <style>
    .cart_item{
      border: 1px solid;
      padding: 20px 40px;
    }
    .cross {
      color: red;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div id="app">
    
  </div>
  
</body>

</html>

Upvotes: 0

Jens Ingels
Jens Ingels

Reputation: 816

Something like this: Note JSFiddle had trouble removing the last element. Might be something I overlooked in the code. Good luck.

const setup = () => {
  const spara = document.querySelector('#btninsert');
  const output = document.querySelector('#output');

  spara.addEventListener('click', addMyEntry);
  output.addEventListener('click', removeMyEntry);
  insertEntries(output);
};
const insertEntries = (target) => target.insertAdjacentHTML('beforeend', loadEntryHTML());
const loadEntryHTML = () => {
  let html = '';
  if(localStorage.length !== 0) {
    for (let i = 0; i < localStorage.length; i++) {
    	const key = localStorage.key(i);
      const value = localStorage.getItem(key);
      html += createEntryHTML(key, value);
    }
  }
  return html;
};
const createEntryHTML = (key, value) => `<p><label class="lbl_key">${key}:</label><span class="sp_value">${value}</span> <a href="#" data-key="${key}" class="l_remove">remove</a><p/>`;
const addMyEntry = () => {
  const inpkey = document.querySelector('#inpkey');
  const inpavv = document.querySelector('#inpvalue');
  const key = inpkey.value;
  const value = inpavv.value;

  if (key && value ) {
    localStorage.setItem(key, value  );
    const output = document.querySelector('#output');
    output.insertAdjacentHTML('beforeend', createEntryHTML(key, value));
  }
};
const removeMyEntry = (event) => {
  const target = event.target;
  if(target.nodeName === 'A') {
    event.currentTarget.removeChild(target.parentNode);
    localStorage.removeItem(target.dataset.key);
  }
};


//load
window.addEventListener('load', setup);
.lbl_key {
  padding-right: 1em;
}
<fieldset>
  <input type="text" id="inpkey" placeholder="Click and select date">

  <input type="text"  id="inpvalue">
  <button type="button" id="btninsert">Save</button>
</fieldset>

<fieldset>
  <div id="output"></div>
</fieldset>

Upvotes: 1

Related Questions