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.简单逻辑代码

       data: function () {
            return {
                nameList:[],
                hobbyList:[],
                nameOver:0,
                hobbyOver:0,
                nameFlag:false,
                hobbyFlag:false
            };
        },
        watch: {
            'name':function(val){
                this.getLocalStorage('name',val);
            },
            'hobby':function(val){
                this.getLocalStorage('hobby',val);
            }
        },
        methods: {
            blur:function(key){
                let self = this;
                if(self[key+"Over"] == false){
                    self[key+"Flag"] = false;
                }
            },
            setListFlag:function(key,val){
                let self = this;
                self.getLocalStorage(key,val);
                self[key+"Flag"] = true;
            },
            setLocalStorage(key,list) {
                if(key && list){
                    if(Array.isArray(list) && list.length > 0){
                        window.localStorage.setItem(key,JSON.stringify(list));
                    }
                }
            },
            getLocalStorage(key,searchText) {
                let self = this,list = [];
                if(key){
                    let _list = window.localStorage.getItem(key);
                    if(_list && typeof _list == "string"){
                        _list = JSON.parse(_list);
                        if(searchText){//即时查询
                            _list = _list.filter(function(item,index){
                                return item.indexOf(searchText) > -1;
                            });
                        }
                        if(_list && Array.isArray(_list)){
                            list = _list;
                        }
                    }
                }
                self[key+"List"] = list;
                return list;
            },
            selectOptions:function(key,val){
                let self = this;
                self[key] = val;
                self[key+"Flag"] = false;
            },
            delData:function(key,val){
                let self = this,list = self.getLocalStorage(key);
                list.splice(list.indexOf(val),1);
                this.setLocalStorage(key,list);
            },
            saveWriteText(name,hobby){
                let self = this;
                let nList = self.getLocalStorage('name'),hList = self.getLocalStorage('hobby');
                if(name && nList.indexOf(name) == -1){
                    nList.push(name);
                    self.setLocalStorage('name',nList);
                }
                if(hobby && hList.indexOf(hobby) == -1){
                    hList.push(hobby);
                    self.setLocalStorage('hobby',hList);
                }
            }
        }

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

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

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

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