首先在子组件将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. Centos7部署ejforum论坛（Java+tomcat+mysql）

    前面搭建Java环境和tomcat环境. 下面进行实战,搭建ejforum论坛 ejforum论坛源码:https://www.lanzous.com/i45rcoh Centos7安装MySQL数据 ...

  2. IntelliJ IDEA设置主题和背景图片(背景色)

    设置主题以及背景图片 设置代码背景颜色

  3. LeetCode 654. Maximum Binary Tree最大二叉树 (C++)

    题目: Given an integer array with no duplicates. A maximum tree building on this array is defined as f ...

  4. leetcode622. 设计循环队列

    设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为“环形缓冲器”. 循环队列的一个好处是我们可以利用这个队列 ...

  5. Excel-图表制作

    柱形图:通常使用柱形图比较数据间的数量关系 折线图:使用折线图来反映数据间的趋势关系 饼图:使用饼图来表示数据间的分配关系  对图表进行刷选 再图表设计下的快速布局可以选择各种样式 迷你图  对某列单 ...

  6. 7.Vue的计算属性

    1.什么是计算属性 computed:计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性有 计算的能力(计算是动词),这里的 计算 就是个函数:简单点说,它就是一个能够 ...

  7. ABP 不包裹返回的数据

    告诉abp不包裹返回的数据,返回的数据是什么 就是什么 不用再多包裹一次了. 用在 如:别人需要你提供接口 且给你指定了返回的数据结构. 源码:

  8. ASP.NET开发实战——（四）ASP.NET MVC是如何运行的？它的生命周期是什么？

    前面的文章我们使用ASP.NET MVC创建了个博客应用,那么它是如何工作的呢?我们都知道ASP.NET的程序需要部署到IIS上才能够通过浏览器来访问,那么IIS与ASP.NET MVC程序之间又是如 ...

  9. 洛谷 P4290 [HAOI2008]玩具取名

    传送门 思路 博客半年没更新了,来更新个博文吧 在\(dsr\)聚聚博客的帮助下,我用半个上午和一个中午的时间苟延残喘地完成了这道题 先是读题目读大半天,最后连个样例都看不懂 之后又是想思路,实在想不 ...

  10. python 编码（encode）解码（decode）问题

    s = '匆匆'print(s)s1 = s.decode("utf-8") # utf-8 转成 Unicode,decode(解码)需要注明当前编码格式print(s1,typ ...