这篇文章给大家分享的是有关vue中如何使用localstorage来存储页面信息的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
环境搭建：
参考：vue API
超简单的Vue.js环境搭建教程
详情：
npm install --global vue-cli
vue init webpack vue-project
然后：
cd vue-project
npm install 如果你配置了淘宝镜像，也可以用cnpm install
npm run dev
我们就在浏览器看到：
但我们最终要实现：
如何实现如图的效果呢？
1.将App.vue修改为：
计算
安全
数据库
网络和加速
企业服务
<template>
<div id="app">
<div class='vue-demo'>
<input type="text" class="txt" v-model='newItem' @keyup.enter='addItemFun'>
<ul>
<li v-for="its in items">{{its.name}}</li>
</ul>
</div>
</div>
</template>
<script>
import store from './store'
export default {
name: 'app',
data() {
return {
newItem: '',
items: store.fetch()
}
},
watch: {
items: {
handler: function(val, oldVal) {
store.save(val);
},
deep: true
}
},
methods: {
addItemFun() {
var _this = this;
_this.items.push({ 'name': _this.newItem });
_this.newItem = '';
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.vue-demo {
width: 400px;
margin: 0 30px;
}
.txt {
width: 200px;
height: 25px;
line-height: 24px;
border-radius: 5px;
}
</style>对于初学vue的同学，可能对于watch可能不太熟悉，那就麻烦大家移步到 vue API 或参考下小颖之前写的文章：vue——实例方法 / 数据
2.在与App.vue同级目录下，新建store.js文件：
const STORAGE_KEY = 'todos-vuejs'
export default {
fetch: function() {
return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save: function(items) {
window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))
}
}3.在项目中打开cmd窗口，运行：npm run dev,就完成啦嘻嘻。
感谢各位的阅读！关于“vue中如何使用localstorage来存储页面信息”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
