Yo optaría por usar una lista (Array
), a la cual le vas añadiendo los valores de acuerdo a como van cambiando. Esto incluso te permitiría agregar un campo de tipo Date
que podría servir como timestamp
indicando el momento en que el valor fue recibido, o cualquier otro campo que consideres necesario aparte del campo valor
. Recuerda que toda lista o Array
es un JSON válido.
Por ejemplo:
let valoresCambiantes = [
"esto es un valor",
"otro valor",
"valor adicional",
"último valor",
"miento, este si es el último"
]
let lista = [];
valoresCambiantes.forEach(valor => lista.push({ valor }));
let json = JSON.stringify(lista, null, 4);
console.log(json);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
Esto te produce un documento JSON cuyo contenido es una lista de objetos con la estructura: { "clave": "valor" }
.
Para acceder a los elementos de esta lista, es tan sencillo como analizar el JSON con JSON.parse()
y volcar el resultado en una variable que será un Array
de objetos. Podrás acceder acada objeto usando la notación de corchete de los tipo Array
:
let miArray = JSON.parse(json);
//objeto 1:
console.log(miArray[0].valor); // "esto es un valor"
En cuanto a la forma en la que planteas el resultado en tu pregunta, es algo que no recomiendo, debido a que las claves llamadas variable1
, variable2
, ... variableN
no seguirían un patrón fácilmente reconocible.
Espero que esto te ayude a resolver el problema.
EDICIÓN
De acuerdo a lo aclarado por tí en el chat, deseas poder almacenar un valor introducido por el usuario en una Cookie, de tal manera que si el usuario introduce otros valores, los mismos sean añadidos a esta Cookie y no se sobreescriban. A la vez deseas darle formato JSON a los valores almacenados en dicha Cookie.
Vamos a hacer un pequeño ejercicio mental sobre lo que deseamos lograr y así tal vez demos con una solución adecuada.
JSON
De JSON - Wikipedia, tenemos que JSON es un formato de texto para el intercambio de datos. Tan sencillo como eso.
Nos permite enviar y recibir datos con una sintaxis parecida a la notación de Objeto de Javascript.
Ahora bien, si lo que deseas almacenar en tu cookie es un texto en formato JSON que contenga los valores previos más el actual, vuelvo a insistir en que uses una lista.
Por ejemplo:
const boton = document.getElementById('botonId');
const guardarValor = event => {
const valor = document.getElementById('inputId').value;
if(!valor) return;
let lista = [];
if(Cookies.get('miCookie') {
lista = JSON.parse(Cookies.get('miCookie'));
}
lista.push(valor);
Cookies.set('miCookie', JSON.stringify(lista));
};
boton.addEventListener('click', guardarValor);
Con esto implementado, puedes ir almacenando valores en la cookie llamada miCookie
que siempre tendrá una lista con todos los valores introducidos por el usuario.
Como el snippet
de StackOverflow no permite trabajar con Cookies, vamos a hacer un Mockup (maqueta o modelo) de este objeto para representar su fucnionalidad.
/**
* La siguiente Clase imita el comportamiento del
* Objeto Cookie del Navegador
*/
class CookieClass {
#cookies;
constructor() {
this.#cookies = {};
}
set(name, value) {
if(!name || !value) return;
if(typeof name !== 'string') return;
this.#cookies[name] = value;
}
get(name) {
if(!name || typeof name !== 'string') return;
return this.#cookies[name];
}
}
// Ahora podemos instanciar nuestro objeto de Cookie básico
const Cookie = new CookieClass();
// funcionalidad para añadir cosas a nuestra cookie
const boton = document.getElementById('botonId');
const guardarValor = event => {
const valor = document.getElementById('inputId').value;
if(!valor) return;
let lista = [];
if(Cookie.get('miCookie')) {
lista = JSON.parse(Cookie.get('miCookie'));
}
lista.push({ valor });
Cookie.set('miCookie', JSON.stringify(lista, null, 4));
// mostramos los datos almacenados
let datos = Cookie.get('miCookie');
document.getElementById('resultadoId').innerText = datos;
};
boton.addEventListener('click', guardarValor);
.container {
width: 100%;
display: flex;
justify-content: center;
}
.ml-1 {
margin-left: 1rem;
}
.ml-2 {
margin-left: 2rem;
}
.mt-2 {
margin-top: 2rem;
}
<div class="container">
<label for="inputId">Valor:</label>
<input class="ml-1"placeholder="Escriba algo..." id="inputId">
<button class="ml-2"type="button" id="botonId">Guardar</button>
</div>
<div class="container mt-2">
<pre id="resultadoId"></pre>
</div>
De esta forma, cada vez que se ejecuta la acción de click
sobre el botón, se almacena lo que el usuario ha introducido en el campo input
, en un texto con formato JSON
, que será almacenado en la cookie
con nombre miCookie
.
En el código he implementado un elemento <pre>
para mostrar el texto del JSON (sin usar parse
), para que veas la estructura que se almacena en la cookie.