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

下面渲染数据。










刷新后就没有数据了，需要对数据进行缓存！

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

刷新前页面效果：

刷新页面后：

键盘事件监听：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

刷新页面后，数据从页面缓存中获取，页面数据不会丢失；

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

下面对重复代码进行封装。

封装的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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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>
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

错误：‘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