实例详解vue中使用localstorage来存储页面信息

本文主要介绍了vue中使用localstorage来存储页面信息,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

环境搭建：

参考：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修改为：

对于初学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,就完成啦嘻嘻。

相关推荐：

详解cookie解决微信不能存储localStorage的问题

HTML5 localStorage知识点总结

使用HTML5中的localStorage实现记住密码功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!