首先在子组件将localstorage方法进行封装

在父组件中对其进行引用

将输入的值存入到定义的searchHistory数组中，存储localstorage需要传两个参数，变量名为searchHistory，值为searchHistory的数组，调用封装好的setStore方法

将存储到localstorage的值，取出来

做的是一个搜索，将localstorage显示出来了

vue中操作localstorage的更多相关文章

  1. vue中使用localStorage存储信息

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...

  2. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  3. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  4. 在vue中操作DOM--this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着"数据驱动"的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 V ...

  5. vue中使用localstorage

    1.store.js(读取写入到localstorage) const STORAGE_KEY="todos-vuejs" export default{ fetch(){ ret ...

  6. vue中操作cookie的插件

    js-cookie 安装: npm i js-cookie import Cookies from 'js-cookie' 具体用法: 写入: Cookies.set('name', 'value') ...

  7. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  8. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  9. 第七十六篇：ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

随机推荐

  1. 21个React开发神器

    摘要: React开发神器. 原文:22 Miraculous Tools for React Developers in 2019 译者:前端小智 下列工具中的重要性与排序无关. 1.Webpack ...

  2. 编译安装redis 3.2.9 make test 时报错

    默认监听端口:6379(可以创建多个端口的配置文件) 源码安装: $ yum install tcl $ wget http://download.redis.io/releases/redis-3. ...

  3. Constructing Roads POJ - 2421

    题目链接:https://vjudge.net/problem/POJ-2421 思路:一些村庄,建一些路,使得所有村庄能相连,而且使得所有路长度之和最短. 题目说了,有些村庄之间已经建了路,说明有些 ...

  4. NLP中的预训练语言模型（四）—— 小型化bert（DistillBert, ALBERT, TINYBERT）

    bert之类的预训练模型在NLP各项任务上取得的效果是显著的,但是因为bert的模型参数多,推断速度慢等原因,导致bert在工业界上的应用很难普及,针对预训练模型做模型压缩是促进其在工业界应用的关键, ...

  5. visual studio之X64调试问题

    这个问题没有解决. 只能X86啦!

  6. 201871010112-梁丽珍《面向对象程序设计（java）》第六、七周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>    https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ...

  7. XSS-Stored

    存储型XSS (持久性XSS) 将恶意JavaScript代码存储在数据库,当下次用户浏览的时候执行 Low <?php if( isset( $_POST[ 'btnSign' ] ) ) { ...

  8. ProceedingJoinPoint获取实现类接口上的注解

    使用aspectj处理拦截aop,需要获取实现类接口上的注解 public Object around(ProceedingJoinPoint pjp) throws Throwable{ long ...

  9. QT控制文本框输入内容

    利用正则表达式,例: //即账号最长为10位,只能由数字组成 QRegExp regx("[0-9]{1,10}"); QValidator *validator = new QR ...

  10. 2016年蓝桥别A组模拟训练

    1. 网友年龄 某君新认识一网友. 当问及年龄时,他的网友说: “我的年龄是个2位数,我比儿子大27岁, 如果把我的年龄的两位数字交换位置,刚好就是我儿子的年龄” 请你计算:网友的年龄一共有多少种可能 ...