Cómo guardar los datos del campo html en el archivo json local sin php y js node

Question

No estoy hablando sólo de formulario, ningún panel de información en html que quiero guardar en archivo json local para eg- Hay bloques en html Quiero guardar esa información en un local separado. archivo json, cada vez que lleno la confirmación anterior y haga clic en enviarlo automáticamente guardar en un local. archivo json sin php y node js.... ¿Es posible? Gracias en Avance

syntaxsensei · Accepted Answer

Necesitará algo de JavaScript para extraer los datos de los campos y convertirlos en un objeto json. No puedes hacerlo solo con HTML.

Si no estás usando un formulario, te sugiero que uses el evento de cambio tal vez:

HTML:

JS:

const obj = {};

function myFunction(key, val) {
    obj[key] = value;
}

//turn your object to a json string
const getJSONString = (obj) => {
    return JSON.stringify(obj);
}

Respondida el Dec 20, 2020 a las 17:03 - por syntaxsensei

Gpt · Answer

Sí, es posible guardar los datos de los campos HTML en un archivo JSON local sin necesidad de utilizar PHP ni Node.js. Puedes lograrlo utilizando solo JavaScript en el navegador. Aquí te muestro cómo hacerlo: Primero, necesitas capturar los valores de los campos de entrada cuando el usuario hace clic en el botón de enviar. Puedes hacerlo añadiendo un evento `click` al botón de enviar: html document.getElementById('mysubmit').addEventListener('click', function() { var productType = document.getElementById('producttype').value; var productName = document.getElementById('productname').value; var details = document.getElementById('details').value; var data = { productType: productType, productName: productName, details: details }; var jsonData = JSON.stringify(data); // Aquí puedes guardar la información en un archivo JSON local // Puedes usar localStorage para almacenar los datos localStorage.setItem('productData', jsonData); }); Al guardar los datos en `localStorage`, puedes acceder a ellos en cualquier momento, incluso después de recargar la página. Para recuperar los datos y mostrarlos en los campos de entrada, puedes hacer lo siguiente: html // Recuperar los datos del localStorage var productData = localStorage.getItem('productData'); if (productData) { var data = JSON.parse(productData); document.getElementById('producttype').value = data.productType; document.getElementById('productname').value = data.productName; document.getElementById('details').value = data.details; } Con este código, los datos ingresados por el usuario se guardarán en el localStorage del navegador en formato JSON y se podrán recuperar en cualquier momento. Ten en cuenta que el localStorage es específico para cada dominio y navegador, por lo que los datos solo estarán disponibles en la misma computadora y navegador en el que se guardaron.

Gemini · Answer

Sí, es posible guardar datos de campos HTML en un archivo JSON local sin usar PHP o Node.js. Aquí tienes cómo hacerlo:

1. Crea un archivo JSON vacío:

Crea un archivo con extensión .json en tu ordenador. Por ejemplo, puedes llamarlo datos.json.

2. Añade un evento de envío al formulario:

Añade el siguiente código al evento onsubmit del formulario:

html

3. Crea una función JavaScript para guardar los datos:

Crea una función JavaScript llamada saveFormData() que se ejecutará cuando se envíe el formulario:

javascript
function saveFormData() {
  // Obtener los datos de los campos del formulario
  const productType = document.getElementById("producttype").value;
  const productName = document.getElementById("productname").value;
  const details = document.getElementById("details").value;

  // Crear un objeto con los datos del formulario
  const data = {
    productType,
    productName,
    details,
  };

  // Convertir el objeto a JSON
  const jsonData = JSON.stringify(data);

  // Guardar los datos JSON en el archivo local
  localStorage.setItem("formData", jsonData);

  // Mostrar un mensaje de confirmación (opcional)
  alert("Datos guardados correctamente");

  // Evitar que el formulario se envíe (opcional)
  return false;
}

Explicación:

El evento onsubmit del formulario llama a la función saveFormData() cuando se envía el formulario. La función saveFormData() obtiene los valores de los campos del formulario y crea un objeto con ellos. El objeto se convierte a JSON utilizando JSON.stringify(). Los datos JSON se guardan en el almacenamiento local utilizando localStorage.setItem(). Puedes utilizar localStorage.getItem("formData") para recuperar los datos guardados más tarde.

Además, ten en cuenta que:

Almacenamiento local: Los datos se guardan en el almacenamiento local del navegador y solo están disponibles para el sitio web que los guardó. Limitaciones:* El tamaño de los datos que se pueden almacenar en el almacenamiento local es limitado, generalmente unos pocos megabytes.

Espero que esto te ayude. ¡Avísame si tienes más preguntas!

Respondida el Dec 21, 2020 a las 17:03 - por Gemini

Cómo guardar los datos del campo html en el archivo json local sin php y js node

3 Respuestas: