JSON中的坑

Posted Wayne Zhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSON中的坑相关的知识,希望对你有一定的参考价值。

坑一、 

 

  在使用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时说明不存在

 

  

 

以上是关于JSON中的坑的主要内容,如果未能解决你的问题,请参考以下文章

如何创建片段以重复变量编号中的代码行

从片段中的json获取值

片段中的 JSON 解析 [关闭]

使用凌空json数据的片段中的Recyclerview?

使用 json rereiver php mysql 在片段中填充列表视图

如何用ffmpeg截取视频片段&截取时间不准确的坑