1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <basic-container>
    <h3>存储</h3>
    <el-tag class="title"
            size="small">基本读写删(持久化存储)
    </el-tag>
    <div class="box">
      <el-button type="primary"
                 size="small"
                 @click="setItem({name:'username', value:'avuex'});">set('username', 'avuex')
      </el-button>
 
      <el-button type="success"
                 size="small"
                 @click="getItem({name:'username'});">get('username')
      </el-button>
 
      <el-button type="danger"
                 size="small"
                 @click="delItem({name:'username'});">remove('username')
      </el-button>
    </div>
    <el-tag class="title"
            size="small">设置session(session存储)
    </el-tag>
    <div class="box">
      <el-button type="primary"
                 size="small"
                 @click="setItem({name:'username', value:'avuex',type:'session'});">set('username', 'avuex')
      </el-button>
 
      <el-button type="success"
                 size="small"
                 @click="getItem({name:'username',type:'session'});">get('username')
      </el-button>
 
      <el-button type="danger"
                 size="small"
                 @click="delItem({name:'username',type:'session'});">remove('username')
      </el-button>
    </div>
    <el-tag class="title"
            size="small">获取所有可以获得的数据
    </el-tag>
    <div class="box">
      <el-button type="success"
                 size="small"
                 @click="getAll()">getAll(持久化存储)
      </el-button>
      <el-button type="success"
                 size="small"
                 @click="getAll({type:'session'})">getAll(session存储)
      </el-button>
      <el-button type="danger"
                 size="small"
                 @click="clearAll()">delAll(持久化存储)
      </el-button>
      <el-button type="danger"
                 size="small"
                 @click="clearAll({type:'session'})">delAll(session存储)
      </el-button>
    </div>
  </basic-container>
 
</template>
 
<script>
  import {
    setStore,
    getStore,
    removeStore,
    clearStore,
    getAllStore
  } from "@/util/store";
 
  export default {
    name: "store",
    methods: {
      setItem(params = {}) {
        const {name, value, type} = params;
        setStore({
          name: name,
          content: value,
          type: type
        });
        this.$message(`设置数据 ${name} = ${value}`);
      },
      getItem(params = {}) {
        const {name, type} = params;
        const content = getStore({
          name: name,
          type: type
        });
        this.$message(`获取数据 ${name} = ${content}`);
      },
      delItem(params = {}) {
        const {name, type} = params;
        removeStore({name, type});
        this.$message(`删除数据 ${name}`);
      },
      clearAll(params = {}) {
        clearStore(params);
        this.$message(`清除全部数据完成`);
      },
      getAll(params = {}) {
        const list = getAllStore(params);
        window.console.log(list);
        this.$message(`结果已经打印到控制台`);
      }
    }
  };
</script>
 
<style lang="scss">
  .title {
    margin-bottom: 10px;
  }
 
  .box {
    margin-bottom: 20px;
  }
</style>