Tengo 20 botones y 20 enlaces y descripciones dentro de info_array. Agrego un detector de eventos de clic a cada botón. Al hacer clic en la función dentro de addEventListener, se debe guardar información única dentro de localStorage con el incremento de las claves de objeto en cada nuevo clic de botón.

El problema es que la función funciona y guarda objetos con un valor único dentro de localStorage como 0,1,2,3,... hasta el décimo objeto. Cuando las claves de objeto llegan a 10, el undécimo objeto con la clave 11 no se guarda en localStorage, el código simplemente sobrescribe el décimo objeto cada vez que hago clic en el botón 11, 12, 13, ... simplemente sobrescribe el valor del décimo objeto en lugar de crear y guardar un nuevo objeto con nuevo clave de objeto como 11,12,13,14,...

No puedo entender qué está mal con mi código porque funciona hasta el décimo objeto.

Código:

 for (let i = 0; i < 19; ++i) { let btn = document.createElement('BUTTON'); btn.addEventListener('click',function(e){ e.stopPropagation(); let newsList = localStorage, keys = Object.keys(localStorage).sort(), match = false, news = { "title":info_array[i].title, "description":info_array[i].description }; if (nl.length > 0) { // check if element exists in localStorage for(let n = 0; n < newsList.length; ++n){ if (JSON.parse(newsList[keys[n]]).link == info_array[i].link) { match = true; } } // if object is unique save in localStorage if (!match) { let key = (parseInt(keys.pop())+1).toString(); localStorage.setItem(key,JSON.stringify(news)); } }else{ // if localStorage is empty add first object localStorage.setItem(0,JSON.stringify(news)); } },{passive:true}); html.appendChild(element); }