@eldenhard2

Как сохранить состояние div в local storage?

Как сохранить выведенную таблицу при нажатии на input и сохранить сам таб после перезагрузки страницы, в данный момент сохраняется введенное число в Input.
Использую LocalStorage
// дочерний навбар откуда постуает запрос на формирование таблицы
<template>

    <div>
        <div id="navbarMain">
            <ul class="navbarul">
                <li class="navbarList">
                    <div @click="newTab('Дислокация')">
                        <img src="@/assets/map.png" class="image">
                    </div>
                    <b-dropdown text="Дислокация">
                        <b-dropdown-item @click="newTab('Дислокация-таблица')">дислокация 1</b-dropdown-item>
                    </b-dropdown>
                </li>
  
                <li class="navbarList" >
                    <div @click="newTab('Рейсы')">
                        <img src="@/assets/flight.png" class="image">
                    </div>
                    <b-dropdown text="Рейсы">
                        <b-dropdown-item @click="newTab('Рейсы-таблица')">Рейсы 1</b-dropdown-item>
                    </b-dropdown>
                </li>
  
                <li class="navbarList">
                    <div @click="newTab('Вагоны')">
                        <img src="@/assets/wagon.png" class="image">
                    </div>
                    <b-dropdown  text="Вагоны" >
                        <b-dropdown-item @click="newTab('Вагоны-таблица')">Вагоны 1</b-dropdown-item>
                    </b-dropdown>
                </li>
  
                <li class="navbarList" >
                    <div @click="newTab('Отчеты')">
                        <img src="@/assets/report.png" class="image">
                    </div>
                    <b-dropdown text="Отчеты">
                        <b-dropdown-item @click="newTab('Отчеты-таблица')">Отчеты 1</b-dropdown-item>
                    </b-dropdown>
                </li>
            </ul>
        </div>
    </div>
  
  
  
  
  </template>
  
  <script>
export default{
    name: 'Navbar',
    props: ['tabs', 'counter'],
    data: function(){
        return{
            inner_counter: this.counter
        }
    },
    methods:{
        newTab(tabname) {
            this.tabs.push({'name': tabname, 'id': this.inner_counter++ })
        }
  
    },
}
  
  
  </script>

//дочерний где формируется таблица
<template>
    <div>
      <!-- <button @click="limits(param)">Фильтрация по числу</button> -->
    <input v-model="name" @input="getName" @keyup.enter="limits(param)" type="number" placeholder="Количество">
    
        <div id="tableMain" v-bind:value="posts">
                        <table border="1" id="info-table" >
                        <tr>
                            <th  v-for="post in posts" :key="post.title">{{post.title}}</th>
                        </tr>
                        <tr>
                            <th  v-for="post in posts" :key="post.id">{{post.id}}</th>
                        </tr>
                        <tr>
                            <td  v-for="post in posts" :key="post.body">{{post.body}}</td>
                        </tr>
                        </table>
        </div>


<br>
  <button class="button Accept" @click="saveChange">Сохранить</button>
    </div>
    </template>
    
    
    
<script>

export default{
    name: 'WagonTable',
    data(){
        return{
            posts: [],
            name: '',
        }
    },
    methods:{
        getName: function(){
            this.param = this.name
        },
        limits: async function(let1=''){
            let ans = ('https://jsonplaceholder.typicode.com/posts?' + `_limit=${let1}`)
            let res = await fetch(ans)
            const posts = await res.json()
            this.posts = posts
            
        }   ,
        saveChange() {
            const parsed = JSON.stringify(this.posts)
            localStorage.setItem('posts', parsed)
            // localStorage.posts = this.posts
            localStorage.name = this.name;
    }
    },
    mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
    if (localStorage.getItem('posts')) {
      this.posts = JSON.parse(localStorage.getItem('posts'))
    }
  }
    
     
}
    
    
    </script>


//родитель

<template>
    <div>
        <WagonNavbar :tabs="tabs"  :counter="counter"></WagonNavbar>
  
        <p class="infoNull" v-if="tabs.length === 0">Вы не выбрали ещё ни одной таблицы</p>
        <div>
            <b-card no-body class="leftTable">
                <b-tabs card>
                    <b-tab v-for="i in tabs" :key="i.id" >
  
                        <template #title>
                            <span>Таблица {{i.id}}</span>
                            <span @click="closeTab(i.id)">&nbsp;&nbsp;❌</span>
                        </template>
  
                        <b-card-text>
                            {{i.name}}
                            <div v-if="i.name==='Рейсы'"> 
                                <FlightTable/>
                            </div>
                            <div v-if="i.name==='Вагоны'"> 
                                <WagonTable/>
                            </div>
                        </b-card-text>
  
                    </b-tab>
                </b-tabs>
            </b-card>
        </div>
  

  
  
    </div>
  
  </template>
  
  <script>
  import WagonNavbar from './Navbar/WagonNavbar.vue'
  import WagonTable from './Table/WagonTable.vue'
  import FlightTable from './Table/FlightTable.vue'

  
export default{
    name: 'WagonPark',
    components:{WagonTable, FlightTable, WagonNavbar},
    data() {
        return {
            tabs: [],
            counter: 1,

        }
    },
    methods:{
        closeTab(x) {
            for (let i = 0; i < this.tabs.length; i++) {
                if (this.tabs[i].id === x) {
                    this.tabs.splice(i, 1)
                }
            }
        },
       
    }
  }
  
  
  
  </script>
  • Вопрос задан
  • 170 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alex_mos
@Alex_mos
Google всему голова
localStorage.posts = this.posts
localStorage.name = this.name;


Что то у вас в коде не наше ни getItem ни setItem при использовании localstorage
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы