title: Editing Values in the locale Storage?
body: <p>I built a Sticky Notes App: you can save short text in the locale storage.
  I save it as objects with id, date and color. I want to change the value color on click. Is it possible?</p>
  
  <p>SAVING NOTE</p>
  
  <pre><code>const pink = 'rgb(252, 168, 212)';
  const yellow = 'rgb(255,255,165)';
  let currentDate = new Date;
  let inpKey = `${currentDate}`;
  let optionsForDate = { weekday: 'short', year: 'numeric', month: 'short', day: 
   'numeric', hour: 'numeric', minute: 'numeric' };
  
  let addNote = function() {
  textToAdd = $('#input').val();
  let dateToDisplay = currentDate.toLocaleDateString(lang, optionsForDate);
  
  let noteObj = {id: inpKey,
      date: dateToDisplay,
      color: yellow,
      text: textToAdd,                        
    };
  
   myNote = JSON.stringify(noteObj);
  
   $('#output').html('&lt;h1&gt;Adding your note...&lt;/h1&gt;'); 
   $('#output').css('text-align', 'center');
   $('#input').val('');      
   localStorage.setItem(noteObj.id, myNote);   
   window.location.reload(); 
    }
   // Calling the addNote function when clicked on sub-button
    $('#sub-button').click(addNote);
  </code></pre>
  
  <p>DISPLAYING THE NOTE WHEN WINDOW RELOADS</p>
  
  <pre><code>$( window ).on("load", function() {
  
    for (let i=0; i &lt; localStorage.length; i++) {
  
  let item = localStorage.getItem(localStorage.key(i));   
  let keyXX = localStorage.key(i);
  
  let noteToDisplay =JSON.parse(item);
  
  $('#output').append(
    `&lt;div class='memo' id='memo${i}' style='background-color:${noteToDisplay.color}'&gt;     
      &lt;p class='dateXX'&gt;${noteToDisplay.date}&lt;/p&gt; 
      &lt;p class='noteXX'&gt;${noteToDisplay.text}&lt;/p&gt;      
      &lt;button 
      class='delBtn' 
      id='delBtn${i}'        
      &gt;Delete&lt;/button&gt;  
      &lt;div class='pink' id='pink${i}'&gt;&lt;/div&gt;
      &lt;div class='green' id='green${i}'&gt;&lt;/div&gt;
      &lt;div class='blue' id='blue${i}'&gt;&lt;/div&gt;  
      &lt;div class='yellow' id='yellow${i}'&gt;&lt;/div&gt;    
    &lt;/div&gt;`
  );    
  </code></pre>
  
  <p>CHANGING THE COLOR</p>
  
  <pre><code> $(`#pink${i}`).on('click', function() { 
    console.log("pink clicked");
    itemToObj =JSON.parse(localStorage.getItem(keyXX));
    itemToObj.color =pink;
    itemToString= JSON.stringify(itemToObj);
    itemToString = localStorage.getItem(localStorage.key(i));
    localStorage.setItem(localStorage.key(i), itemToString); 
    // window.location.reload();
  </code></pre>