vue利用local存储实现搜索历史记录

Html

//搜索框区域
<input v-model="keyword" type="text" /> <button @click="onSearch()">搜索</button> 
//搜索历史区域
<div>
	<span v-if="item in searchList">{{item}}</span>
</div>

vue

export default{
  data(){
	return{
	  keyword:"",//搜索框输入的内容
	  searchList:[],//搜索历史列表
	}
  },
  creaerd(){
   this.searchList = JSON.parse(localStorage.getItem('keyword')) || []; //先读取local里存储的历史记录
  },
  methods:{
  	onSearch(){
  	  const value = this.keyword.trim()
  	  if(!value){//判断输入框的值是否为空  如果为空 直接返回不在执行
  	  	return;
  	  }
  	  //如果local里不存在当前输入的关键词 则存到local里
  	  if(this.searchList.indexOf(value) === -1){
  	    this.searchList.unshift(value)
  	    //历史记录最多只取十个
  	    this.searchList = this.searchList.slice(0,10)
  	    localStorage.setItem('keyword',JSON.stringify(this.searchList))
  	  }
  	}
  }
 }