JSON中的坑

Posted 2020-09-21 Wayne Zhu

坑一、 

 

　　在使用localStorage时，我们会给一个key存取一个value，这个value可以是一个普通的字符串，也可以是一个对象，如果是一个字符串，我们就需要通过JSON.stringify来转化为JSON字符串。 

　   但是当我们修改这个JSON字符串时，它就又一个字符串变成了对象，所以如果我们希望得到时就不需要在使用JSON.parse，如果是字符串，就需要使用JSON.parse，实际上都是字符串，只是有的需要解析，有的不需要解析。

 

 

　　如图，如果对于前两者需要解析，对于第三个我们将之当做对象直接使用即可。

 

　　如下所示：

 addOne: function (mainIndex, secondIndex, unitPrice, sbgaid, name) {
          var indexes = {
            mainIndex: mainIndex,
            secondIndex: secondIndex
          };
          this.ADD_ONE(indexes); 
          if (typeof localStorage.getItem(sbgaid) == "object") {
            var desc1 = {
              name: name,
              number: 1,
              unitPrice: unitPrice,
            };
            util.setLocalStorage(sbgaid, desc1);
          } else {
            var newAmount = JSON.parse(localStorage.getItem(sbgaid)).number + 1;
            console.log(newAmount);
            var desc2 = {
              name: name,
              number: newAmount,
              utitPrice: unitPrice
            };
            util.setLocalStorage(sbgaid, desc2);
          }
        },

 

开始时，如果没有这个key，那么通过判断，得到的type就是object，我们传入一个对象，使用封装好的方法，如下：

util.setLocalStorage = function (key, value) {
  localStorage.setItem(key, JSON.stringify(value));
};

 

 

 

然后如果已经有了这个key，我们就可以通过解析这个JSON字符串，然后将这个对象的number属性+1， 然后在创建一个新的对象，把sbgaid的value值修改为新的对象。 

这样，当我们不断地添加商品时，就会看到下面的变化：

即其中的number在一直变化，而其他的不会变化。

 

如果说，我们在控制台中看到的localStorage的值已经变成了[object object]的形式，那么说明我们写错了！！！ 即localStorage的值必须是这样确定的字符串。

 

并且我们可以将localStorage键值对的形式看做数组在for中遍历，如下所示：

 <div class="item-wrap">
        <div class="second-wrap" v-for="item,index in localStorage">
          <div class="title-price">
            <span class="item-title">{{JSON.parse(item).name}} &nbsp;&nbsp;&nbsp;</span>
            
            <span class="price-info">￥{{JSON.parse(item).unitPrice}}/{{JSON.parse(item).unit}} X {{JSON.parse(item).number}}</span> 
          </div>
          <span class="kind-price">￥{{JSON.parse(item).unitPrice * JSON.parse(item).number}}</span>
        </div>
      </div>

 

 

 

坑二、

　　如果我们希望在localStorage中没有一个键值对的时候存入这个键值对，那么就要首先判断这个键值对是否存在，通过实践，可以发现， 使用 typeof localStorage.getItem("uid") == "object" 这个语句，如果返回为true，那么uid在localStorage中就是不存在的，相反就是存在的。

　　坑：但是如果我们使用另外一种"等价"的方式就不行了，如typeof localStorage.uid == "object"这个得到的结果就是false，因为上是 undefined， 所以我们得用 typeof localStorage.uid == "undefined" 这种形式来判断才会比较好。

　　但是对于在localStorage中的某个键的值为空的如何判断呢？ 通过实践发现使用 typeof localStorage.uid （假设localStorage中存有键 uid ,而值为空的情况）那么得到的就是string， 而使用 typeof localStorage.getItem("uid") 得到的也是string. 

　　所以，需要判断localStorage中是否存在键值对，通过下面的两种形式都是可行的。

typeof localStorage.uid == "undefinded" // 为true时说明不存在
typeof localStorage.getItem("uid") == "object"   // 为true时说明不存在