VUE本地存储 good-storage
作者：
秒速五厘米
文章简介：
VUE实现搜索显示历史搜索记录，采用插件 - 良好的存储
VUE实现搜索显示历史搜索记录，采用插件 - 良好的存储
安装插件
npm install good-storage -S
在本地新建cache.js文件，该文件是关于本地存储的逻辑处理（缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面）
cache.js
/*把搜索的结果保存下来*/
/*用export把方法暴露出来*/
/*定义存储搜索的key _search_定义内部使用的key*/
const SEARCH_KEY='_search_'
const SEARCH_MAX_LENGTH=15
/*插入方法 arr存储的数据 val传入存储的值 compare前后比较的函数 maxlen存入的最大值*/
function insertArray(arr,val,compare,maxlen){
//findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
const index=arr.findIndex(compare)
if(index===0){ //数据为数组中的第一个数据 不做任何操作
return
}
if(index>0){ //数组中有这条数据并且不再第一个位置
arr.splice(index,1) //删掉这个数
}
arr.unshift(val);//把这条数据存储到数组中的第一个位置上
if(maxlen && arr.length>maxlen){
//如果有条数限制并且数组的个数大于限制数
arr.pop() //方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值
}
}
//开源storage的库，对localstorage和sessionstorage的封装
import storage from 'good-storage'
export function saveSearch(query){
let searches=storage.get(SEARCH_KEY,[])
/*逻辑是最后一次搜索的结果放到搜索历史的第一个*/
insertArray(searches,query,(item)=>{
return item===query //这是传入的一个比较函数 说明query在这个数组中
},SEARCH_MAX_LENGTH)
storage.set(SEARCH_KEY,searches)
return searches
}在对应的组件中应用的方式：
<template>
<div>
<div @click="$router.back()">
<span class="iconfont icon-back-m"></span>
</div>
<div :class="isFocus?'':'active'">
<span v-if="isFocus" class="search-btn iconfont icon-sousuo"></span>
<input :style="isFocus?'':'text-indent:1.2em;'" v-model="search" @focus="initPage" type="text" placeholder="请输入您要查找的内容"/>
</div>
<div v-if="isFocus">
<span class="iconfont icon-query1" @click="toggleDrawer"></span>
</div>
<div v-if="!isFocus">
<span @click="iptShearch">搜索</span>
</div>
<div v-if="!isFocus">
<h4 v-if="historyxs">搜索历史</h4>
<ul v-if="historyxs">
<li v-for="(item,index) in searches_list" :key="index" @click="historysearch(item)">{{item}}</li>
</ul>
<p v-if="historyxs" @click="clearhis()">清空历史记录</p>
</div>
</div>
</template>
<script>
import {saveSearch} from '../../tools/cache.js' //引用本地存储js
import storage from 'good-storage' //引入good-storage包
export default {
data(){
return{
search:'',
isFocus:true,
searches_list:[], //历史搜索记录列表
historyxs:false
}
},
methods:{
//输入框获取焦点
initPage(){
this.isFocus = false;
this.$emit('initSearchPage');
//为避免重复先清空再添加
this.searches_list = [];
let searches=storage.get('_search_');
this.searches_list = searches?searches:[];
if (this.searches_list.length > 0 ) {
this.historyxs=true;
}else{
this.historyxs=false;
}
},
//点击搜索
iptShearch(){
this.isFocus = true;
if(this.search!=''){ //搜索框不为空
saveSearch(this.search); // 本地存储搜索的内容
let params = {
majorInfo : this.search //零件号或零件名（中英文）或零件类型名称或责任人名称
}
this.$emit('handleSearch' , params)
this.isFocus = true;
this.search='';
}
},
//高级搜索按钮
toggleDrawer() {
this.$emit('initSearchPage')
this.$emit('listenSlide')
},
//清空历史记录
clearhis(){
storage.remove('_search_');
this.searches_list = [];
this.historyxs=false;
},
//点击历史搜索把搜索的记录添加到good-storage中
historysearch(item){
saveSearch(item);
this.search = item;
this.iptShearch();
this.historyxs = false;
}
}
}
</script>
<style scoped>
.top-box{
height: $topheight;
position: fixed;
top: 0;
left: 0;
width: 750px;
z-index: 778;
background: $gantanColor;
.back-box{
display: block;
height: 100px;
padding: 0 30px;
line-height: 100px;
position: absolute;
left: 0;
top: 0;
>span{
font-size:40px;
color:$fontcolor;
}
}
.search-box{
position: absolute;
width:70%;
top: 50%;
left: 50%;
z-index: 888;
transform: translate(-50% , -50%);
&.active{
width:74%;
left: 13%;
transform: translate(0 , -50%);
}
height: 64px;
font-size: 0;
border:1px solid #fff;
background-color: #fff;
border-radius: 35px;
display: flex;
flex-direction: row;
justify-content: flex-start;
>input{
display: inline-block;
width: 90%;
height: 100%;
line-height: 64px;
padding: 0;
outline: none;
border:0 none;
font-size: 24px;
color:#363636;
background-color: transparent;
}
>span{
margin: 0 10px 0 18px;
display: inline-block;
height: 100%;
line-height: 64px;
font-size: 36px;
color:$titlecolor;
}
}
.slidemenu-btn{
position: absolute;
right: 30px;
top:50%;
transform: translateY(-50%);
z-index: 555;
>span{
color: $fontcolor;
font-size: 45px;
&.text{
font-size: 24px;
}
}
}
.history-panel{
position: absolute;
top: 100px;
left: 0;
background-color: #fff;
min-height: 1500px;
width: 750px;
overflow: hidden;
.his_ulcon{
margin-top: 40px;
box-sizing: border-box;
padding: 0 30px;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
>li{
padding: 15px 30px;
border: 1px solid #999;
border-radius: 34px;
margin-right: 20px;
margin-bottom: 30px;
font-size: 28px;
color: #363636;
}
}
h4{
box-sizing: border-box;
padding: 30px;
line-height: 80px;
height: 80px;
font-size: 30px;
}
>p{
margin: 30px 0;
text-align: center;
line-height: 80px;
height: 80px;
font-size: 30px;
}
}
}
</style>注意：引入cache.js时你的文件路径要按照你自己的路径来，一一对应
https://www.jianshu.com/p/20a577a6de00