（五）页面存储sessionStorage和localStorage

一、cookie、sessionStorage和localStorage的区别：

二、sessionStorage应用：

语法：

存：

window.sessionStorage.setItem(
        "userSearch",
        JSON.stringify(this.pageParam)
      );

取：

let searchObjStr = window.sessionStorage.getItem("userSearch");

 移除：

window.sessionStorage.removeItem('person-leave-search-data');

例1：sessionStorage-demo：现在使用sessionStorage缓存页面查询条件，使得点击修改跳转到详情页后再回来不改变页面：

1、route：

 //临时存储
  {
    path: '/sessionstore',
    redirct: '/sessionstore/index',
    name: 'index',
    component: Layout,
    meta: { title: 'index', authority: ['user_manage'] },
    noDropdown: true,
    children: [
      
      {
        path: 'index',
        name: 'index',
        component: () => import('@/views/sessionstore/index'),
        meta: { title: '临时存储', authority: ['user_manage'], keepAlive: false }
      },

      {
        path: 'detail',
        name: 'detail',
        hidden:'true',
        component: () => import('@/views/sessionstore/detail'),
        meta: { title: 'detail', authority: ['user_manage'], keepAlive: false }
      }
    ]
  }

2、index分页页面：

<template>
  <div class="app-container">
    <el-row class="location-query">
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
    </el-row>
    <el-row class="query-id">
      <el-input v-model="pageParam.nickName" placeholder="请输入昵称" @keyup.enter.native="fetchData()"></el-input>
    </el-row>

    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="拼命加载中"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="用户名" min-width="22" align="center" show-overflow-tooltip>
        <template slot-scope="scope">{{scope.row.userName}}</template>
      </el-table-column>

      <el-table-column label="昵称" min-width="18" align="center" show-overflow-tooltip>
        <template slot-scope="scope">{{scope.row.userNickName}}</template>
      </el-table-column>

      <el-table-column label="操作" min-width="60" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" round @click="deleteProcess(scope.row.id)">删除</el-button>
          <el-button type="primary" size="mini" round @click="update(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.pageIndex"
        :page-sizes="pageSizes"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { parseTime } from "../../utils/index.js";

import { getPagerUser } from "@/api/user";
import qs from "qs";
export default {
  data() {
    return {
      list: [],
      listLoading: true, // true
      pageSizes: [5, 10, 15],
      total: 0,
      pageParam: {
        pageIndex: 1,
        pageSize: 5,
        nickName: ""
      }
    };
  },
  created() {
    this.fetchData();
    //alert("crea"+this.pageParam.pageIndex)
  },
  mounted() {
    let searchObj = window.sessionStorage.getItem("userSearch");
    let obj = JSON.parse(searchObj);
    if (obj) {
      //延迟加载，解决页面pageIndex不能被重新赋值
      setTimeout(() => {
        this.pageParam.pageIndex = obj.pageIndex;
        this.pageParam.pageSize = obj.pageSize;
        this.pageParam.nickName = obj.nickName;
        this.fetchData();
        //alert("mon"+this.pageParam.pageIndex)
      }, 100);
    }
  },

  filters: {
    parseTime(time) {
      var date = new Date(time);
      return parseTime(date);
    }
  },

  methods: {
    handleChange(value) {
      console.log(value);
    },

    fetchData() {
      this.getList();
    },

    handleSizeChange(val) {
      this.pageParam.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageParam.pageIndex = val;
      this.getList();
    },

    getList() {
      getPagerUser(this.pageParam)
        .then(res => {
          this.listLoading = false;
          if (res.data !== null) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    update(user) {
      this.saveSearchData();
      this.$router.push({
        path: "/sessionstore/detail",
        query: {
          userNickName: user.userNickName,
          userName: user.userName
        }
      });
    },

    //缓存查询条件
    saveSearchData() {
      window.sessionStorage.setItem(
        "userSearch",
        JSON.stringify(this.pageParam)
      );
    },

    message(msg) {
      this.$message({
        type: "warning",
        message: msg
      });
    }
  },
 beforeRouteLeave(to, from, next) {
    if (to.name !== 'sessionstoreDetail') {
      sessionStorage.removeItem('userSearch');
    }
    next();
  }
};
</script>

<style>
.product-new {
  float: left;
  margin-bottom: 15px;
}
.product {
  margin-left: 2%;
  float: left;
}
.product-query {
  float: right;
}
.block {
  margin-bottom: 20px;
  margin-top: 20px;
  float: right;
}
.product-create {
  width: 50%;
  margin-left: 25%;
}
.row-text {
  margin-bottom: 15px;
}
.product-text {
  margin-top: 10px;
  width: 30%;
  float: left;
}
.product-title {
  width: 70%;
  float: left;
}
.query-role,
.location-query {
  float: right;
  margin-left: 30px;
}
.query-startTime,
.query-endTime,
.query-id,
.position-status {
  float: right;
  margin-left: 20px;
}
</style>

3、详情页面：

<template>
    <div>{{userName}}{{userNickName}}</div>
</template>

<script>
export default {
    data () {
        return {
            userName:'',
            userNickName:''
        }
    },
     created() {
    this.userName = this.$route.query.userName;
    this.userNickName = this.$route.query.userNickName;
  },
}
</script>

测试：改变查询条件pageIndex、pageSize、userNickName点击修改按钮后，再返回这个页面，该页面没有发生改变。

注:这里加了个延迟加载是发现没有延迟加载时，pageIndex的值可以保留，但是页面上渲染的pageIndex值与之前的不一致，如：

显示的还是第三页的数据，但是页面上页码却是1。