vue中使用localstorage来存储页面信息

前端之家收集整理的这篇文章主要介绍了vue中使用localstorage来存储页面信息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻。

环境搭建:

参考:vue API

详情:

npm install --global vue-cli

vue init webpack vue-project

然后:

cd vue-project

npm install 如果你配置了淘宝镜像,也可以用cnpm install

npm run dev

我们就在浏览器看到:

但我们最终要实现:

如何实现如图的效果呢?

1.将App.vue修改为:

对于初学vue的同学,可能对于watch可能不太熟悉,那就麻烦大家移步到 vue API 或参考下小颖之前写的文章:vue——实例方法 / 数据

2.在与App.vue同级目录下,新建store.js文件

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,就完成啦嘻嘻。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/35386.html

猜你在找的Vue相关文章