首先在子组件将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. 3.InfluxDB-InfluxQL基础语法教程--数据说明

    下面是本次演示的示例数据 表名:h2o_feet 数据示例: 数据描述 : 表h2o_feet中所存储的是6分钟时间区间内的数据. 该表有一个tag,即location,该tag有两个值,分别为coy ...

  2. kafka-python开发kafka生产者和消费者

    1.安装kafka-python 执行命令 pip install kafka-python kafka-python        1.4.6 2.编写python kafka 生产者消费者代码 # ...

  3. osi七层简介（通俗易懂）

    OSI七层 在以前不同的公司都会推出属于自己公司的私有网络协议,相互之间不能兼容用了那家公司的网就相当于上了那家公司的贼船 .    后来呢由一家名叫iso的组织制作了一个叫osi的协议 相当于给大家 ...

  4. [PHP] substr占用内存谨慎使用

    在下面的场景中使用substr的时候, 有时候会报超出内存fatal error ,当curl读取的内容过大的时候 $header_size = curl_getinfo($curl_handle, ...

  5. C语言三种参数传递方式

    值传递.指针传递.引用传递 只有在函数调用时,才会为形参分配内存空间,调用结束便会释放. 值传递和指针传递,传递的都是实参的一份拷贝. C语言在线编译器:http://www.dooccn.com/c ...

  6. Go语言goroutine调度器初始化(12)

    本文是<Go语言调度器源代码情景分析>系列的第12篇,也是第二章的第2小节. 本章将以下面这个简单的Hello World程序为例,通过跟踪其从启动到退出这一完整的运行流程来分析Go语言调 ...

  7. LG2272/BZOJ1093 「ZJOI2007」最大半连通子图 Tarjan缩点+DAG求最长链

    问题描述 LG2272 BZOJ1093 题解 观察半联通的定义,发现图中的一些结点,构成的链一定是一个半联通子图. 此时存在的环可能会干扰求解,于是\(\mathrm{Tarjan}\)缩点. 于是 ...

  8. hdu1495-非常可乐-（倒水问题bfs）

    http://acm.hdu.edu.cn/showproblem.php?pid=1495 题解: 1.最少次数?江湖套路,bfs.2.怎么倒?从一个杯子倒到另一个杯子.3.倒多少?因为没有刻度,所 ...

  9. [BJOI2014]想法（随机算法，神奇思路，拓扑排序）

    对于这种随机数据或者随机算法的题-- 都是神仙题吧. 要求的就是对每个点前 \(m\) 个点中有多少个可以到达它. 由于评分方式这么奇怪,不妨考虑随机. 随机 127 次(可以选别的数,够多而且不 T ...

  10. [LeetCode] 269. Alien Dictionary 另类字典

    There is a new alien language which uses the latin alphabet. However, the order among letters are un ...