关于sessionStorage存储数据例子vue

我们在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 cc">
        <span @click="detail(item)" id="item(item)">{{item}}span>
        <span @click="delate(item)">Xspan>
      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>