Localstorage实现input输入信息记忆缓存

像百度搜索框一样，点击input框后，下拉框展现以前输入的信息列表，列表可以即时查询、选择、删除，简单地通过Localstorage浏览器缓存实现，多组input

1.页面展现样式代码

<div class="group-row">
    <div class="form-group form-label">
        <label for="name" class="label">姓名</label>
        <div class="control">
            <input type="text" id="name" v-model="name" @click="setListFlag('name',name)" v-on:blur="blur('name')">
            <ul v-show="nameFlag" v-on:mouseover="nameOver=1" v-on:mouseout="nameOver=0">
                <li v-for="(index, name) in nameList" @click.prevent.self="selectOptions('name',name)">
                    <span>{{name}}</span>
                    <button class="delBut" @click="delData('name',name)">&times;</button>
                </li>
                <li v-if="nameList.length == 0"><span>暂无数据!</span></li>
            </ul>
        </div>
    </div>
    <div class="form-group form-label">
        <label for="hobby" class="label">爱好</label>
        <div class="control">
            <input type="text" id="hobby" v-model="hobby" @click="setListFlag('hobby',hobby)" v-on:blur="blur('hobby')">
            <ul v-show="hobbyFlag" v-on:mouseover="hobbyOver=1" v-on:mouseout="hobbyOver=0">
                <li v-for="(index, hobby) in hobbyList" @click.prevent.self="selectOptions('hobby',hobby)">
                    <span>{{hobby}}</span>
                    <button class="delBut" @click="delData('hobby',hobby)">&times;</button>
                </li>
                <li v-if="hobbyList.length == 0"><span>暂无数据!</span></li>
            </ul>
        </div>
    </div>
</div>

2.简单逻辑代码

 1        data: function () {
 2             return {
 3                 nameList:[],
 4                 hobbyList:[],
 5                 nameOver:0,
 6                 hobbyOver:0,
 7                 nameFlag:false,
 8                 hobbyFlag:false
 9             };
10         },
11         watch: {
12             'name':function(val){
13                 this.getLocalStorage('name',val);
14             },
15             'hobby':function(val){
16                 this.getLocalStorage('hobby',val);
17             }
18         },
19         methods: {
20             blur:function(key){
21                 let self = this;
22                 if(self[key+"Over"] == false){
23                     self[key+"Flag"] = false;
24                 }
25             },
26             setListFlag:function(key,val){
27                 let self = this;
28                 self.getLocalStorage(key,val);
29                 self[key+"Flag"] = true;
30             },
31             setLocalStorage(key,list) {
32                 if(key && list){
33                     if(Array.isArray(list) && list.length > 0){
34                         window.localStorage.setItem(key,JSON.stringify(list));
35                     }
36                 }
37             },
38             getLocalStorage(key,searchText) {
39                 let self = this,list = [];
40                 if(key){
41                     let _list = window.localStorage.getItem(key);
42                     if(_list && typeof _list == "string"){
43                         _list = JSON.parse(_list);
44                         if(searchText){//即时查询
45                             _list = _list.filter(function(item,index){
46                                 return item.indexOf(searchText) > -1;
47                             });
48                         }
49                         if(_list && Array.isArray(_list)){
50                             list = _list;
51                         }
52                     }
53                 }
54                 self[key+"List"] = list;
55                 return list;
56             },
57             selectOptions:function(key,val){
58                 let self = this;
59                 self[key] = val;
60                 self[key+"Flag"] = false;
61             },
62             delData:function(key,val){
63                 let self = this,list = self.getLocalStorage(key);
64                 list.splice(list.indexOf(val),1);
65                 this.setLocalStorage(key,list);
66             },
67             saveWriteText(name,hobby){
68                 let self = this;
69                 let nList = self.getLocalStorage('name'),hList = self.getLocalStorage('hobby');
70                 if(name && nList.indexOf(name) == -1){
71                     nList.push(name);
72                     self.setLocalStorage('name',nList);
73                 }
74                 if(hobby && hList.indexOf(hobby) == -1){
75                     hList.push(hobby);
76                     self.setLocalStorage('hobby',hList);
77                 }
78             }
79         }

 

3.页面显示截图，具体的样式很简单，可以随手写一个

（1）下拉展现存储的信息，支持删除

（2）立即查询搜索，无条件符合

（3）saveWriteText保存到本地缓存的方法，在点击保存或者执行某个操作后，可自定义

 

转载于:https://www.cnblogs.com/lhjfly/p/10313226.html