Vue submit Form in LocalStorage [duplicate]

Question

Hi i'm starting to use vue and javascript from some day and i need to do an example of form for my "exame". I would like to save locally the data entered by users and use this data and enter them on another page. Do I have to use a database? (user enter "name" and in the next page "welcome (name)"). This is part of my code:

        <label>Nome:</label>
        <input type="text" required v-model="nome">

        <div class="submit">
            <button>Iscriviti!</button>

export default {
data() {
    return {
        nome: '',
    }
},
methods: {
    inviaForm() {
        console.log('form inviato')
    }
}

Sorry for my english, i'm so bad

Usman · Accepted Answer · 2022-01-06 16:12:09Z

1

Page 1

<template>
    <div>
        <label>Nome:</label>
        <input type="text" required v-model="nome">

        <div class="submit">
            <button @click="inviaForm">Iscriviti!</button>
        </div>
</template>
<script>
    export default {
        data() {
            return {
                nome: '',
            }
        },
        methods: {
            inviaForm() {
                localStorage.setItem('nome',this.nome)
            }
        }
</script>

Page 2

<template>
    <div>
        <div>Name is: {{nome}}</div>
</template>
<script>
    export default {
        data() {
            return {
                nome: '',
            }
        },
        mounted() {
            this.nome = localStorage.getItem('nome');
        }
    }
</script>

answered Jan 6, 2022 at 16:12

Usman

3493 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

interactivesites · Accepted Answer · 2022-01-06 15:35:28Z

0

this may help -- just the snippet that would store the name. I reckon you're not into reactive / vuex states, so try this (and in your other component use onMount() { this.nome = localStorage.getItem('name') } to retrieve. You'll figure it out.

<form @submit="inviaForm"> 
     <label>Nome:</label>
     <input type="text" required v-model="nome">
     <button>Iscriviti!</button>
</form>

export default {
data() {
    return {
        nome: '',
    }
},
methods: {
    inviaForm() {
        localStorage.setItem('name', this.nome)
    }
}

.

answered Jan 6, 2022 at 15:35

interactivesites

11 bronze badge

Collectives™ on Stack Overflow

Vue submit Form in LocalStorage [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related