Vue模块化以及封装Storage组件实现保存搜索的历史记录

已于 2023-10-16 15:24:37 修改
阅读量384 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-09-04 18:03:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42113716/article/details/132674380
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面渲染数据。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
刷新后就没有数据了，需要对数据进行缓存！
在这里插入图片描述
H5中有localstogry可以进行缓存。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
改变后的数据没有存入localstogy中.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
备份localstory,进行封装；
在这里插入图片描述
对localStorage进行封装；
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
(一)、未添加缓存数据之前，数据会丢失；

<template>
  <div id="app">
   <input  type="text" v-model='todo'/>
   <button @click="doAdd()">+增加</button>
   <br> 
   <h2>进行中</h2>
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="item.checked">
                 <br>
                 <input type='checkbox' v-model='item.checked'>{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
   <br> 
   <h2>已完成</h2> 
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="!item.checked">
                 <input type="checkbox" v-model='item.checked'>{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       todo:'',
       list:[]
       }
     },methods:{
         doAdd(){
          //1、获取文本框输入的值
          //2、把文本框的值push到list里面
          this.list.push({title:this.todo,checked:true});  
         },
         removeData(key){
         //splice js操作数组的方法
          this.list.splice(key,1);
         }
     }
}
</script>
<style>
h-tab-pane{
  background:red;
  input{
    background:green;
  }
}
</style>

刷新前页面效果：
在这里插入图片描述
刷新页面后：
在这里插入图片描述
键盘事件监听：

<template>
  <div id="app">
   <input  type="text" v-model='todo'   @keydown="pressBoard($event)"/>
   <h2>进行中</h2>
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="item.checked">
                 <input type='checkbox' v-model='item.checked'>{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
   <h2>已完成</h2> 
   <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="!item.checked">
                 <input type="checkbox" v-model='item.checked'>{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       todo:'',
       list:[]
       }
     },methods:{
         doAdd(){
          //1、获取文本框输入的值
          //2、把文本框的值push到list里面
          this.list.push({title:this.todo,checked:true});  
         },
         removeData(key){
         //splice js操作数组的方法
          this.list.splice(key,1);

         },
         pressBoard(e){
         if(e.keyCode==13){
           this.list.push({title:this.todo,checked:true});
           this.todo='';
          }
         }
     }
}
</script>
<style>
h-tab-pane{
  background:red;
  input{
    background:green;
  }
}
</style>

在这里插入图片描述
H5中有localstogry可以进行缓存。

<template>
  <div id="app">
   <input  type="text" v-model='todo'   @keydown="pressBoard($event)"/>
   <!-- <button @click="doAdd()">+增加</button> -->
   <h2>进行中</h2>
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="item.checked">
                 <input type='checkbox' v-model='item.checked'>{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
   <h2>已完成</h2> 
   <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="!item.checked">
                 <input type="checkbox" v-model='item.checked'>{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
    </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       todo:'',
       list:[]
       }
     },
     methods:{
         doAdd(){
          //1、获取文本框输入的值
          //2、把文本框的值push到list里面
          this.list.push({title:this.todo,checked:true}); 
          //JSON.stringify(this.list) 将json对象转化为json字符串
          localStorage.setItem('list',JSON.stringify(this.list)); 
         },
         removeData(key){
         //splice js操作数组的方法
          this.list.splice(key,1);
          localStorage.setItem('list',JSON.stringify(this.list)); 
         },
         pressBoard(e){

         if(e.keyCode==13){

           this.list.push({title:this.todo,checked:true});
           this.todo='';
           }
          localStorage.setItem('list',JSON.stringify(this.list)); 
         }
     },
      mounted:function(){  // 生命周期函数，与data、methods 同级别  vue页面刷新就会触发的方法
        //JSON.parse() 将json字符串转换为json对象
// eslint-disable-line no-unused-vars
        var list = JSON.parse(localStorage.getItem('list'));
        if(list){
          //刷新页面。从缓存中获取数据返回给list
          this.list=list;
        }
     }
}
</script>
<style>
h-tab-pane{
  background:red;
  input{
    background:green;
  }
}
</style>

刷新页面后，数据从页面缓存中获取，页面数据不会丢失；
在这里插入图片描述

<template>
  <div id="app">
   <input  type="text" v-model='todo'   @keydown="pressBoard($event)"/>
   <h2>进行中</h2>
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="item.checked">
                 <br>
                 <input type='checkbox' v-model='item.checked' @change="saveList()">
{{item.title}}---<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
   <h2>已完成</h2> 
   <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="!item.checked">
                 <br>
                 <input type="checkbox" v-model='item.checked'  @change="saveList()">
{{item.title}}---<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
  </div>
</template>
<script>
export default {
  // name:"app",
  data(){
     return{
       todo:'',
       list:[]
       }
     },
     methods:{
         doAdd(){
          //1、获取文本框输入的值
          //2、把文本框的值push到list里面
          this.list.push({title:this.todo,checked:true}); 
          //JSON.stringify(this.list) 将json对象转化为json字符串
          localStorage.setItem('list',JSON.stringify(this.list)); 
         },
         removeData(key){
         //splice js操作数组的方法
          this.list.splice(key,1);
          localStorage.setItem('list',JSON.stringify(this.list)); 
         },
         pressBoard(e){
         if(e.keyCode==13){
           this.list.push({title:this.todo,checked:true});
           this.todo='';
           }
          localStorage.setItem('list',JSON.stringify(this.list)); 
         },
         saveList(){
            localStorage.setItem('list',JSON.stringify(this.list)); 
         }
     },// 生命周期函数，与data、methods 同级别 vue页面刷新就会触发的方法
      mounted:function(){          
//JSON.parse() 将json字符串转换为json对象
// eslint-disable-line no-unused-vars

        var list = JSON.parse(localStorage.getItem('list'));        
        if(list){
          //刷新页面。从缓存中获取数据返回给list
          this.list=list;
        }
      }
}
</script>
<style>
h-tab-pane{
  background:red;
  input{
    background:green;
  }
}
</style>

在这里插入图片描述
下面对重复代码进行封装。

封装的storage.js:
路径：src/model/storage.js

//在src下创建model文件夹，model文件夹中创建storage.js文件
//用到了node js 基础
var storage = { 
   set(key,value){
    localStorage.setItem(key,JSON.stringify(value));
   },
   get(key){
    return  JSON.parse(localStorage.getItem(key));
   },
   remove(key){
      localStorage.remove(key);
   }
}
//通过export default将storage暴漏出去
export   default  storage;

在这里插入图片描述

<template>
  <div id="app">
   <input  type="text" v-model='todo'   @keydown="pressBoard($event)"/>
   <h2>进行中</h2>
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="item.checked">
                 <br>
                 <input type='checkbox' v-model='item.checked' 
@change="saveList()">{{item.title}}---
<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
   <h2>已完成</h2> 
    <template v-for="(item,key) in list" :key="item">
              <h-tab-pane v-if="!item.checked">
                <input type="checkbox" v-model='item.checked' @change="saveList()">
{{item.title}}---<button @click="removeData(key)">删除</button>
              </h-tab-pane>
    </template>
  </div>
</template>
<script>
//script中引入暴漏的storage
import storage  from  './model/storage.js'
console.log(storage);

export default {
  // name:"app",
  data(){
     return{
       todo:'',
       list:[]
       }
     },
     methods:{
         doAdd(){
          //1、获取文本框输入的值
          //2、把文本框的值push到list里面
          this.list.push({title:this.todo,checked:true}); 
          //JSON.stringify(this.list) 将json对象转化为json字符串
          storage.set('list',JSON.stringify(this.list));
         },
         removeData(key){
         //splice js操作数组的方法
          this.list.splice(key,1);
             storage.set('list',JSON.stringify(this.list));
         },
         pressBoard(e){
         if(e.keyCode==13){
           this.list.push({title:this.todo,checked:true});
           this.todo='';
           }
          storage.set('list',JSON.stringify(this.list));
         },
         saveList(){
            storage.set('list',JSON.stringify(this.list));
         }
     }, // 生命周期函数，与data、methods 同级别  vue页面刷新就会触发的方法
      mounted:function(){         //JSON.parse() 将json字符串转换为json对象
// eslint-disable-line no-unused-vars
 var list = storage.get('list');
        if(list){
          //刷新页面。从缓存中获取数据返回给list
          this.list=list;
        }
      }
}
</script>
<style>
h-tab-pane{
  background:red;
  input{
    background:green;
  }
}
</style>

错误：‘x‘ is assigned a value but never used no-unused-vars
报错：
97:21 error ‘count’ is assigned a value but never used no-unused-vars
✖ 1 problem (1 error, 0 warnings)
发生原因：
发生这种情况是因为eslint的验证语法，您正在定义x但未使用它。
解决方法如下：
只需将其删除
在错误代码后加入该行注释就行：
// eslint-disable-line no-unused-vars
修改后为：
let count = 10000 // eslint-disable-line no-unused-vars
this.$nextTick(function() {
console.log('DOM 更新了 ’ )
})
原文链接：https://blog.csdn.net/xiaoyuer_2020/article/details/110429773

天空～之城
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2-storage:通过浏览器存储包装JavaScript或Vue.js应用
05-02
vue2存储 JavaScript或Vue.js应用程序的浏览器存储。 请参阅
vue项目中 localStorage 的用法建议
happy81997的博客
06-17 1433
很多人在用 或 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目使用，特对常规操作进行封装。不完善之处会进一步更新...封装之前先梳理下所需功能，并要做成什么样，采用什么样的规范，部分主要代码片段是以 作为示例，最后会贴出完整代码的。可以结合项目自行优化，也可以直接使用。 设置 setStorage Storage 本身
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
最新发布
qq_43641110的博客
04-18 1243
​​​​​​​。
vue项目storage本地存储
sinat_39648402的博客
07-30 8330
1.在model文件夹下面新建一个storage.js const storage = { set(key,value){ sessionStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(sessionStorage.getItem(key)); }, getForIndex(index){ return sessionStorage.key(index) .
vue中使用storage存储与使用
Zhencode的博客
11-07 1万+
storage封装成模块storage.js const storage={ /设置/ set(key,value){ localStorage.setItem(key,Json.stringify(value)) } /获得/ get(key){ return Json.parse(localStorage.getItem(key)) } /移除/ remove(key){ l...
15.Vue - webStorage浏览器本地存储
weixin_51351637的博客
09-11 832
1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)2.浏览器端通过 Window.sessionStorage和Window.localStorage属性来实现本地存储机制。该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对 应的值。该方法接受一个键名作为参数，返回键名对应的值。该方法接受一个键名作为参数，并把该键名从存储中删除。该方法会清空存储中的所有数据。
vue中使用localStorage存储信息
一个超爱喝可乐的web前端攻城狮
03-11 4223
vue中使用localStorage存储信息 一 什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage; sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载; localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在的; 二 使用方法
Vue 实现输入框新增搜索历史记录功能
10-16
主要介绍了Vue 输入框新增搜索历史记录功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue elementui 实现搜索栏公共组件封装的实例代码
10-15
主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue中的transition封装组件的实现方法
10-16
主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3 表格组件封装复用
02-27
Vue3 实现表格业务封装，从底层的角度，去带着大家封装一个可编辑的表格。从而在基础的基础上，做一个层次的提升，增加面试通过的几率。帮助大家在开发过程中，提高代码的复用性。
vue组件实现可搜索下拉框扩展
08-27
主要为大家详细介绍了vue组件实现可搜索下拉框的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【vue】Vue数据双向绑定原理及实现（持续更新。。。）
qq_34838046的博客
09-08 358
原理 使用Object.defineProperty() 进行数据劫持。主要为修改对象中数值的getter和setter函数 let person = {} let name = "张二狗" Object.defineProperty(person,"name",{ set:function(newValue){ //在此增加该数据被设置的时候的操作 //例如： console.log("set") name = newVa
Vue项目实战：Storage封装
林夏天的博客
03-22 1245
Storage封装 封装Storage的原因： Storage本身有API，但是只是简单的key/value，不能存储更复杂的形式。 Storage只存储字符串，需要人工转换成json对象 Storage只能一次性清空，不能单个清空 封装方法： 希望的session storage数据格式是： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rZtTWOj-...
Vue中封装一个localStorage工具类，如何引用？
前端互助会
01-25 795
示范：在vue框架中配置一个localStorage工具类，然后引用！ 首先，在src下建立一个文件夹utils，再在utils下建立一个js,tools.js; 在tools.js中封装localStorage // 封装本地存储的方法 var prototype={ $setStroage(key, value) { //对象必须序列化才能存入缓存 localStorage.setItem(key, JSON.stringify(value));
VUE 缓存 设置缓存 使用缓存
热门推荐
a_靖的博客
08-06 2万+
QQ技术交流群173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票 VUE.JS 使用缓存我建议用good-storage ，简单方便好用，下面来看看怎么使用它 good-storage 是一个插件，需要安装 localStorage 临时缓存（主动清除缓存才会销毁） sessionStorage 长期缓存（关闭浏览器自动销毁） 安装步骤： 在命令行安装 ...
Vue——打造权限系统
Nick_YangXiaoTong的博客
12-14 473
作者自述： 在多页面Vue项目中，如何优雅的的进行权限匹配 解决痛点： 复杂的身份判断 —— 在日常开发中经常用 || &amp;amp;&amp;amp; 来进行身份验证从而处理DOM的显隐已经业务逻辑的交互 添加新身份以往的逻辑全部需要重现处理 依赖： 正则表达式 Array.filter 闭包 实现思路 创建业务字典项（要求按照业务功能级别拼接） 创建身份字典项（后期扩展和维护）...
温故而知新——vue常用语法(五)路由&storage
我的E家
08-12 539
路由 1、 路由出口 ： <router-view></router-view> 2、 声明式导航： <el-button size='small' type='warning'> <router-link :to="{ path: '/newTask', query: {type:'update',data:scope.row}}">修改任务 &lt......
Vue2-浏览器本地存储（WebStorage）及完善TodoList案例、组件自定义事件及完善TodoList案例
weixin_56498069的博客
08-18 883
Vue2-浏览器本地存储（WebStorage）、组件自定义事件
vue3组件封装之搜索组件的封装
05-03
Vue3 的组件封装非常简单，下面是一个搜索组件的封装示例： 首先，创建一个 Search.vue 的组件，它的模板如下： ```html <template> <div class="search"> <input type="text" v-model="searchInput" @input="handleInput" /> <button @click="handleSearch">搜索</button> </div> </template> ``` 在组件中，我们需要引入 `reactive`，这是 Vue3 中新加入的函数，用于将数据转换为响应式的数据。我们还需要定义 `props`，用于接收父组件传递的参数，以及定义 `emit`，用于向父组件发送事件。 ```javascript import { defineComponent, reactive, emit } from 'vue'; export default defineComponent({ name: 'Search', props: { placeholder: { type: String, default: '请输入关键词', }, }, setup(props, { emit }) { const searchInput = reactive({ value: '', }); const handleInput = (event) => { searchInput.value = event.target.value; }; const handleSearch = () => { emit('search', searchInput.value); }; return { searchInput, handleInput, handleSearch, }; }, }); ``` 在 `setup` 函数中，我们使用 `reactive` 将 `searchInput` 对象转换为响应式数据。当用户输入关键词时，`handleInput` 函数被调用，将输入的值赋值给 `searchInput.value`。当用户点击搜索按钮时，`handleSearch` 函数被调用，向父组件发送 `search` 事件，并将输入框的值作为参数传递给父组件。 最后，在父组件中使用该组件： ```html <template> <div> <Search placeholder="请输入关键词" @search="handleSearch" /> <ul> <li v-for="item in searchResult" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import Search from './Search.vue'; export default { components: { Search, }, data() { return { searchResult: [], }; }, methods: { handleSearch(keywords) { // 这里实现搜索逻辑，将搜索结果赋值给 searchResult this.searchResult = [ { id: 1, name: '搜索结果1' }, { id: 2, name: '搜索结果2' }, { id: 3, name: '搜索结果3' }, ]; }, }, }; </script> ``` 在父组件中，我们通过 `@search` 监听子组件的 `search` 事件，并在 `handleSearch` 方法中实现搜索逻辑。将搜索结果赋值给 `searchResult`，然后通过 `v-for` 渲染出结果列表。 这就是 Vue3 中搜索组件的封装方法，简单易用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值