我們在vue中，經常通過事件攜帶著引數來進行處理，有時候還需要將這些資料儲存起來，一般有vuex，sessionStorage，localStorage進行儲存，其中vuex儲存只要當我們重新整理頁面資料就會丟失，這當然不是我們想要的結果；在看sessionStorage，它有隻要頁面不關閉，不手動刪除資料，資料就會一直存在，現在貌似儲存量為4兆左右；最後localStorage，它的特點是，除非我們手動刪除，否則資料不會丟失，即使關閉頁面，資料依然會存在，著讓我們很容易想到頁面經常提示的是否要儲存密碼，當點選是的時候，資料就儲存到localStorage中了。下面請看程式碼
這裡是詳解，下面附有全部程式碼

<div class="three" v-show="isShow" @click="clear"><div>清空歷史記錄</div></div>
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
      id="resu" v-show="show">
      <li v-for="item in result" class="resu"
 
 @click="que(item)">
        <span>{{item.name}}</span>
        <span>{{item.count}}套</span>
      </li>
    </ul>

當點選que事件時，進行跳轉，並儲存資料

que (item) {
        this.cc.push(item.name)
        var name = this.cc.toString()
        sessionStorage.setItem('objStr', name)
//
 
        this.$store.commit('jiLu', name)
        this.getDate()
//        this.$router.push('/ershou/' + name)
        this.$router.push({path: '/ershou', query: {village: name}})
      },

那麼資料在哪讀呢，可以在我們任何vue的檔案中讀，例如

created () {
      var a = sessionStorage.getItem('objStr')
      if (a) {
        this.cc = a.split(',')
      }
    },

那麼如何刪除某一項呢

delate (item) {
        var num = this.cc.indexOf('item')
        this.cc.splice(num - 1, 1)
        sessionStorage.setItem('objStr', this.cc)
//        this.$store.commit('clearOne', item)
      },

如何全部刪除呢

clear () {
        MessageBox.confirm('確定要清空歷史搜尋麼？').then(action => {
//          this.$store.commit('clear', name)
          this.cc = []
          sessionStorage.clear('objStr')
        })
      }

下面將附上全部程式碼

template>
  <div>
    <div class="one">
      <div class="vv">
        <img src="../img/logo.png" alt="" id="img">
        <input type="text" v-model="value" placeholder="請數入小區或商圈名" @change="sou">
      </div>
      <span id="return" @click="fan">取消</span>
    </div>
    <div class="two" v-show="isShow">
      <p>歷史搜尋</p>
      <!--<div v-for="item in this.$store.state.record">-->
      <div v-for="item in cc">
        <span @click="detail(item)" id="item(item)">{{item}}</span>
        <span @click="delate(item)">X</span>
      </div>
    </div>
    <div class="three" v-show="isShow" @click="clear"><div>清空歷史記錄</div></div>
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
      id="resu" v-show="show">
      <li v-for="item in result" class="resu" @click="que(item)">
        <span>{{item.name}}</span>
        <span>{{item.count}}套</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui'
  import {VillageFind} from '../../../api/config'
  export default{
    data () {
      return {
        value: '',
        type: 'used',
        loading: false,
        arr: [],
        result: [],
        isShow: true,
        num: 1,
        size: 12,
        cc: [],
        block: [],
        show: false
      }
    },
    created () {
      var a = sessionStorage.getItem('objStr')
      if (a) {
        this.cc = a.split(',')
      }
    },
    methods: {
      loadMore () {
        this.loading = true
        this.size += 12
        this.getDate()
        this.loading = false
      },
      getDate () {
        var self = this
        VillageFind({type: this.type, name: this.value, page_num: this.num, page_size: this.size}).then(function (res) {
          self.result = res.data.data
        })
      },
      sou () {
        this.getDate()
        this.isShow = false
        this.show = true
      },
      fan () {
        this.$router.go(-1)
      },
      que (item) {
        this.cc.push(item.name)
        var name = this.cc.toString()
        sessionStorage.setItem('objStr', name)
//        this.$store.commit('jiLu', name)
        this.getDate()
//        this.$router.push('/ershou/' + name)
        this.$router.push({path: '/ershou', query: {village: name}})
      },
      detail (item) {
        this.$router.push({path: '/ershou', query: {village: item}})
      },
      delate (item) {
        var num = this.cc.indexOf('item')
        this.cc.splice(num - 1, 1)
        sessionStorage.setItem('objStr', this.cc)
//        this.$store.commit('clearOne', item)
      },
      clear () {
        MessageBox.confirm('確定要清空歷史搜尋麼？').then(action => {
//          this.$store.commit('clear', name)
          this.cc = []
          sessionStorage.clear('objStr')
        })
      }
    }
  }
</script>