在公司项目中需求，点击商品添加浏览器缓存，商品只能存在localStorage中3条数据，重复不能添加，超出3个删除最后一个数据！文笔不好，大家请见谅。。。。如果有那位大神可以优化一下代码感激不尽！！！！谢谢

// demo 代码
<template>
  <div>
    <div>localStorage缓存</div>
    <ul>
      <li v-for="item in list" @click="clickFn(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list : [
        {
          name :'wang',
          age:18
        },
        {
          name :'李四',
          age:18
        },
        {
          name :'你好',
          age:18
        },
        {
          name: '俊',
          age: 18
        }
      ]
    }
  },
  methods: {
    clickFn (item) {
      let isExist = JSON.parse(localStorage.getItem("handGameType"));
      let handGameTypeArr = []
      let isYes = true;
      if (!isExist) {
        localStorage.setItem("handGameType", JSON.stringify([{
          name: item.name,
          age: item.age
        }])); 
      } else {
        isExist.forEach(ele => {
          if (item.name == ele.name) {
            isYes = false
          }
        })
        if (isYes) {
          handGameTypeArr = [{
            name: item.name,
            age: item.age
          },...isExist]
          if (handGameTypeArr.length > 3) {
            handGameTypeArr.pop()
          }
        } else {
          handGameTypeArr = isExist
        } 
        localStorage.setItem("handGameType", JSON.stringify(handGameTypeArr)); 
      }
    }
  }
}
</script>