首先在子组件将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. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  2. 第五篇：Python函数基础篇

    本篇介绍什么是函数.函数的特性.函数的定义.函数的调用.以及函数的参数.以及关于全局变量和局部变量的使用等等. 一.什么是函数: 函数是最基本的一种代码抽象方式,为了实现某种特定的功能而组织的带名字的 ...

  3. STM32F429驱动SDRAM

    1 SDRAM控制原理 1.1 SDRAM信号线 1.2 SDRAM地址线 SDRAM包含有“A”以及“BA”两类地址线: A:行(Row)与列(Column)共用的地址线 BA:独立的用于指定SDR ...

  4. python-分割url字符串

    url = ' http://images.jupiterimages.com/common/detail/27/68/22986827.jpg' url.strip().split('/')[-1] ...

  5. 16-numpy笔记-莫烦pandas-4

    代码 import pandas as pd import numpy as np dates = pd.date_range('20130101', periods=6) df=pd.DataFra ...

  6. opencv局限：cv::FileStorage读取中，xml文件的第一层节点不能超过4个

    今天测试发现一个问题,cv::FileStorage读取中,xml文件的第一层节点不能超过4个. <?xml version="1.0"?> <opencv_st ...

  7. 【UVA1303】Wall（凸包）

    点此看题面 大致题意: 给你一个多边形,要求建一面墙使得墙上的点至少离多边形每个顶点\(R\)的距离,求最短的墙长. 考虑\(R=0\) 考虑当\(R=0\)时,所求的答案显然就是求得的凸包的周长. ...

  8. windows7 - windows10开启802.1x md5质询

    (win7 win10通用)20190324   全程不需重启 注:如果导入后没有看到md5,那得去注册表看看是否真的有键值(我的一开始提示成功,但是注册表里看不到,后来发现复制时候多了一些不可见的字 ...

  9. Comet OJ - Contest #13-C2

    Comet OJ - Contest #13-C2 C2-佛御石之钵 -不碎的意志-」(困难版) 又是一道并查集.最近做过的并查集的题貌似蛮多的. 思路 首先考虑,每次处理矩形只考虑从0变成1的点.这 ...

  10. 【网络知识之五】TCP

    TCP协议:传输控制协议. 一.TCP保证可靠性的机制1.校验和 TCP报头有16位检验和: 由发送端填充, 检验形式有CRC校验等. 如果接收端校验不通过, 则认为数据有问题. 此处的校验和不光包含 ...