You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.7 KiB
95 lines
2.7 KiB
<template> |
|
<basic-container> |
|
<h3>存储</h3> |
|
<el-tag class="title">基本读写删(持久化存储)</el-tag> |
|
<div class="box"> |
|
<el-button type="primary" @click="setItem({ name: 'username', value: 'avuex' })" |
|
>set('username', 'avuex') |
|
</el-button> |
|
|
|
<el-button type="success" @click="getItem({ name: 'username' })">get('username')</el-button> |
|
|
|
<el-button type="danger" @click="delItem({ name: 'username' })" |
|
>remove('username') |
|
</el-button> |
|
</div> |
|
<el-tag class="title">设置session(session存储)</el-tag> |
|
<div class="box"> |
|
<el-button |
|
type="primary" |
|
@click="setItem({ name: 'username', value: 'avuex', type: 'session' })" |
|
>set('username', 'avuex') |
|
</el-button> |
|
|
|
<el-button type="success" @click="getItem({ name: 'username', type: 'session' })" |
|
>get('username') |
|
</el-button> |
|
|
|
<el-button type="danger" @click="delItem({ name: 'username', type: 'session' })" |
|
>remove('username') |
|
</el-button> |
|
</div> |
|
<el-tag class="title">获取所有可以获得的数据</el-tag> |
|
<div class="box"> |
|
<el-button type="success" @click="getAll()">getAll(持久化存储)</el-button> |
|
<el-button type="success" @click="getAll({ type: 'session' })" |
|
>getAll(session存储) |
|
</el-button> |
|
<el-button type="danger" @click="clearAll()">delAll(持久化存储)</el-button> |
|
<el-button type="danger" @click="clearAll({ type: 'session' })" |
|
>delAll(session存储) |
|
</el-button> |
|
</div> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { setStore, getStore, removeStore, clearStore, getAllStore } from '@/utils/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>
|
|
|