Vue submit Form in LocalStorage-CodePudding

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 >
            <button>Iscriviti!</button>

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

Sorry for my english, i'm so bad

CodePudding user response：

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)
    }
}

CodePudding user response：

Page 1

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

        <div >
            <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>