使用localstorage来存储页面信息
今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻。
环境搭建:
参考:vue API
vue2.0+element+node+webpack搭建的一个简单的后台管理界面
详情:
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,就完成啦嘻嘻。
转载于:https://www.cnblogs.com/yingzi1028/p/7774954.html
使用localstorage来存储页面信息相关推荐
- JS9day(BOM对象模型,setTimeout定时器,JS单线程执行机制,location对象,swiper插件,localStorage本地存储,购物车案例升级版,学习信息案例(本地存储))
文章目录 BOM简介 定时器-延时函数 5秒关闭广告案例 递归模拟setInterval函数 两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
- 爬虫获取页面信息并存储
目标: 获取CSDN首页直播内容 实现获取内容的类 Crowller 获取内容: 通过 superagent插件获取页面信息 存储内容:fs.writeFileSync 根据以上两点实现的类: imp ...
- 用cookie和localStorage存储登录信息的区别
前几天面试问项目时问到了为什么用localStorage存储登录信息不用cookie,做项目的时候确实没有想过为什么,只是因为localStorage这个api用起来方便,cookie还要自己封装,于 ...
- 利用HTML5 LocalStorage实现跨页面通信channel
引言 随着Web技术的发展,涌出了越来越多的复杂的应用.诸多Web应用逐渐向增强用户体验方向发展.在诸如付款.在线聊天等场景中,有时需要多页面进行数据通信.以前的实现方法有cookie.服务器中转.F ...
- html5保存资源本地,html5之Localstorage本地存储
题外话 今天把博客里面的内容,同步在github的issues中了.具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star. L ...
- 在HTML5 localStorage中存储对象
我想将JavaScript对象存储在HTML5 localStorage ,但是我的对象显然正在转换为字符串. 我可以使用localStorage存储和检索原始JavaScript类型和数组,但是对象 ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- 使用ASP.NET 2.0 Profile存储用户信息
概要:许多ASP.NET应用程序需要跨访问的用户属性跟踪功能,在ASP.NET1.1中,我们只能人工实现这一功能.但如今,使用 ASP.NET 2.0的Profile对象,这个过程变得异常简单.Ste ...
- 实现一周之内自动登录的 cookie和session还有localStorage的存储机制
这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧. 1.cookie用来存储用户相关数据,存储的位置在用户本地: 首先是登录界面定义: <fo ...
最新文章
- C 冒泡排序及其非常非常非常简单的优化
- 源码编译安装httpd服务
- [转]Ionic系列——CodePen上的优秀Ionic_Demo
- windows多线程--原子操作
- JNDI学习总结(一)——JNDI数据源的配置(转)
- 风变Python3---if条件相关的学习
- c++ 创建并调用dll
- 【虹膜识别】基于matlab GUI滤波器虹膜识别【含Matlab源码 917期】
- 2021-10-17工厂模式类图与代码示例
- matlab的图片压缩两种方法(DCT方法与行程编码压缩方法)
- HTML放大镜 (商品放大镜)
- jitpack No version of NDK matched the requested
- 【浅墨著作】 OpenCV3编程入门 内容简介 勘误 配套源代码下载
- 每日一题:给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。
- Docker使用注意事项
- 【JDBC】JDBC
- GAT解读graph attention network
- matlab排序函数——sort
- Django HttpResponse响应
- c++编码小技巧之函数返回时自动调用