首先在子组件将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. c++的explicit理解

    默认规定 只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象 explicit class A { explicit A(int n); A(char *p); ...

  2. hashlib以及hmac的日常应用

    首先我们要明白日常的Web网页为了保证数据的安全都会对数据的存储进行一些加密,当我需要在此网站验证时就需要对原有的密码以及账号进行加密此时我们就需要用到hashlib这个框架的一些功能,下面我就来更大 ...

  3. Python列表操作与深浅拷贝（5）——数字处理函数、类型判断、列表链表队列栈

    python内建数据结构 分类 数值型: int float complex bool 序列对象: 字符串str 列表list 元组tuple 键值对: 集合set 字典dict 数值型 (list ...

  4. 201871010107-公海瑜《面向对象程序设计（java）》第十六周学习总结

    201871010107-公海瑜<面向对象程序设计(java)>第十六周学习总结            项目                            内容   这个作业属于哪 ...

  5. web-程序逻辑问题

    题目 查看源码 http://ctf5.shiyanbar.com/web/5/index.txt 代码如下 <html> <head> welcome to simplexu ...

  6. CSS制作导航栏

    最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...

  7. clickhouse 离线/在线 安装和java通过jdbc链接

    检查 需要确保是否x86_64处理器构架.Linux并且支持SSE 4.2指令集 grep -q sse4_2 /proc/cpuinfo && echo "SSE 4.2 ...

  8. shell编程（1）

    shell编程(1) 杨乾成 2017301500302 一.尝试ping 题目第一项要求是检验自己主机所在网段有多少主机连通.于是我写的shell程序如下: #!/bin/bash i=; coun ...

  9. <BackTracking> Combination, DFS :216 DP: 377

    216. Combination Sum III 保证subset.size( ) == k && target == 0的时候结束DFS subset.size( ) > k ...

  10. js中VO解析

    执行环境(环境) 执行环境的用处 执行环境定义了变量或函数有权访问的其他数据,每一个执行环境都存在一个关联的变量对象(VO),代码无法访问,内部解析器会使用它,如果环境为函数,则将函数的AO作为VO, ...