How can I save value in input after click on link?

Question

I have a search that works with ajax. If the user clicks on one of the seach results, he gets on a new page. Now, if he klicks back on the browser UI, he gets back to the search. However, the value from the input is not getting saved and the search is empty. I would like to have keep the value.

The search is programmed in vue.js:

<template>
    <div>
        <div class="row">
            <div class="col-12">
                <div class="card no-shadow-card mb-2">
                    <div class="card-header primary-color white-text">
                        <div class="d-flex justify-content-between">
                            <span>Filter</span>
                            <div>
                                <a href="javascript:void(0)" class="card-toggle-body-visibility white-text"><i
                                        class="fa fa-chevron-up rotated-icon" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-row mb-4">
                            <div class="col-md-6 mb-1">
                                <!-- First name -->
                                <input type="text" id="vacancieName" data-reset="filter"
                                       class="form-control" placeholder="Name der Stellenanzeige" v-model="name">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-6">
                                <select class="md-form mdb-select"
                                        name=""
                                        searchable="Suchen"
                                        v-model="company">
                                    <option value="">Unternehmen</option>
                                    <option v-for="ownCompany in ownCompanies" :value="ownCompany.id" v-text="ownCompany.title"></option>
                                </select>
                                <button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
                            </div>
                            <div class="col-md-6">
                                <select class="md-form mdb-select"
                                        name=""
                                        searchable="Suchen"
                                        v-model="job">
                                    <option value="" disabled>Beruf Auswählen</option>
                                    <option v-for="avalibleJob in avalibleJobs" :value="avalibleJob.id" v-text="avalibleJob.name"></option>
                                </select>
                                <button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
                            </div>
                        </div>
                        <div class="col-12 float-right">
                            <button @click.prevent="getVacancies" type="button" class="btn btn-sm btn-light-blue">
                                Suchen
                            </button>
                            <button @click="resetFilter" type="button" class="btn btn-sm btn-unique">
                                Zurücksetzen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <vacancie-index-result-componment v-for="vacancie in vacancies" v-bind:vacancie="vacancie"
                                              :key="vacancie.id"></vacancie-index-result-componment>
        </div>
    </div>
</template>

<script>
    import VacancieIndexResultComponentComapany from './VacancieIndexResultComponentCompany.vue'

    export default {
        name: 'VacancieIndexComponentCompany',
        components: {
            'vacancie-index-result-componment': VacancieIndexResultComponentComapany,
        },
        data() {
            return {
                avalibleJobs: [],
                ownCompanies: [],
                vacancies: [],
                name: '',
                company: '',
                job: ''
            }
        },
        methods: {}//Some Axios methods to get the results
    }
</script>

In general, this done like this: https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads There's also [Vue routing](https://vuejs.org/v2/guide/routing.html), provided that the search result pages are part of the Vue app. — , Jan 23 '19 at 20:18
localStorage, sessionStorage, cookies, URL parameters... it's all been covered thoroughly. You need to save the value somewhere other than in volatile memory. — isherwood, Jan 23 '19 at 20:21

score 0 · Answer 1 · edited Jan 24 '19 at 07:21

There are two ways to resolve your problems

Use dialog to handle your new page,above the <body></body>or your root element ,it coast less code to resolve. it’s will hold the code in a single component
Hard way or the best way whatever you say, is to use the vue-route system, use <keep-alive></keep-alive> tags to cache your components, and you’ll see the value is still there.you can also see it in dev-tools anyway.

How can I save value in input after click on link?

1 Answers1