1.新建Component
<template>
<div>
<aside>
<button@click="checkStore()">检查支持存储</button>
</aside>
<header>试一下输入值存储</header>
<input id="value" v-model="info" />
<p id="show" ref="show">{{info}}</p><br />
<button @click="save()">保存了老哥</button>
<button @click="getValue()">取值了老哥</button>
</div>
</template>
<script>
export default {
data() {
return {
info: "",
}
},
methods: {
save: function() {
localStorage.myInfo = this.info;
},
checkStore: function() {
var support = false;
if (typeof(Storage) !== "undefined") {
support = true;
} else {
support = false;
}
alert(support ? "支持" : "不支持");
},
getValue: function() {
this.info = "sdf" + localStorage.myInfo;
}
}
}
</script>
<style>
</style>
2.导入
<script>
import storage from './components/storage.vue
</script>
3.声明
components: {
storage
}
4.使用
<template>
<div id="app">
<storage></storage>
</div>
</template>
