实现localStorage自增

93 阅读1分钟
<script>
  const key = 
    {
      name: "小米",
      price: 1999,
    }
  

  function setStore(data) { //定义一个让localstorage自增的方法
    const key = JSON.parse(localStorage.getItem("key")) || [];
    key.push(data);
    localStorage.setItem("key", JSON.stringify(key));
  }
  setStore(key)
  console.log(JSON.parse(localStorage.key).length);
  
</script>

相信不少初学的小伙伴对localstorage感到疑惑,其最特别的属性就在于存入其中的数据是本地存储,这也就导致在遍历代码时会遇到类型错误等问题。要了解清楚出错原因,首先要先了解清楚其原理。

image.png

localStorage本身是个对象,当我们调用存储的数据时,即localStorage.getItem("key"),其数据类型是个JSON格式的字符串,这显然没有办法直接对其返回值进行使用,所以就需要用JSON.parse()将其转为js能够识别的复杂数据类型。值得注意的是,localStorage的自增只能通过以下顺序实现,即: 1、通过key和getItem方法取出JSON字符串类型的数据;2、使用JSON.parse(localStorage.getItem("key"))将其转为js能够识别的复杂数据类型;3、如果该数据类型是数组,我们可以调用数组自带的push方法实现数组数据增加,数组对象同理;4、使用localStorage.setItem("key",JSON.stringify(数组)),将该数组重新转为JSON形式的字符串重新写入(覆盖)原先的键中。

这看起来似乎很绕,但这有助于我们更好的理解初学者在未来所需要学习前后端交互相关的内容。

而在我们练习的时候,也不要忘记使用localStorage.clean()方法清楚原有数据(调用一次即可),否则容易遇到原有数据没清理而导致类型错误的问题