javascript - 在区域设置存储中编辑值？

Question

我构建了一个便笺应用程序：您可以将短文本保存在语言环境存储中。我将它保存为带有 id、日期和颜色的对象。我想在点击时更改值颜色。可能吗？

保存注意事项

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('<h1>Adding your note...</h1>'); 
 $('#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);

窗口重新加载时显示注释

$( window ).on("load", function() {

  for (let i=0; i < localStorage.length; i++) {

let item = localStorage.getItem(localStorage.key(i));   
let keyXX = localStorage.key(i);

let noteToDisplay =JSON.parse(item);

$('#output').append(
  `<div class='memo' id='memo${i}' style='background-color:${noteToDisplay.color}'>     
    <p class='dateXX'>${noteToDisplay.date}</p> 
    <p class='noteXX'>${noteToDisplay.text}</p>      
    <button 
    class='delBtn' 
    id='delBtn${i}'        
    >Delete</button>  
    <div class='pink' id='pink${i}'></div>
    <div class='green' id='green${i}'></div>
    <div class='blue' id='blue${i}'></div>  
    <div class='yellow' id='yellow${i}'></div>    
  </div>`
);    

改变颜色

 $(`#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();

标签： javascriptjsonobjectlocal-storage