坑一、

  在使用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: ,
unitPrice: unitPrice,
};
util.setLocalStorage(sbgaid, desc1);
} else {
var newAmount = JSON.parse(localStorage.getItem(sbgaid)).number + ;
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中的坑的更多相关文章

  1. 在JSON中遇到的一些坑

    今天在进行压测的时候,由于需要使用到json进行传参,并且需要在JMeter中加入少量的JSON,由于JSON在java中呈现键值对的形式,并且需要使用到“”来修饰,导致只能使用\进行转义,在发送请求 ...

  2. Golang中的坑二

    Golang中的坑二 for ...range 最近两周用Golang做项目,编写web服务,两周时间写了大概五千行代码(业务代码加单元测试用例代码).用Go的感觉很爽,编码效率高,运行效率也不错,用 ...

  3. Golang 中的坑 一

    Golang 中的坑 短变量声明  Short variable declarations 考虑如下代码: package main import ( "errors" " ...

  4. Torch-RNN运行过程中的坑 [2](Lua的string sub函数,读取中文失败,乱码?)

    0.踩坑背景 仍然是torch-rnn/LanguageModel.lua文件中的一些问题,仍然是这个狗血的LM:encode_string函数: function LM:encode_string( ...

  5. "bower.json 中出现语法错误" 的解决方案之一

    当你用 Visual Studio 2015 Update 3 打开从别处下载的开源项目的时候,如果发现 Bower 提示 "bower.json 中出现语法错误". 请检查一下. ...

  6. JSON相关知识,转载:删除JSON中数组删除操作

    一:JSON是什么 JSONg格式:对象是一个无序的“名称/值”对的集合. 对象以括号开始,括号结束. 名称冒号分隔值. "名称/值"之间用逗号分隔 例: var people = ...

  7. js中eval详解,用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  8. MVC3不能正确识别JSON中的Enum枚举值

    一.背景 在MVC3项目里,如果Action的参数中有Enum枚举作为对象属性的话,使用POST方法提交过来的JSON数据中的枚举值却无法正确被识别对应的枚举值. 二.Demo演示 为了说明问题,我使 ...

  9. json中loads的用法

    python中json中的loads()和dumps()它们的作用经常弄换了,这里记录下,loads方法是把json对象转化为python对象,dumps方法是把pyhon对象转化为json对象,我是 ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议93:构造方法应初始化主要属性和字段

    建议93:构造方法应初始化主要属性和字段 类型的属性应该在构造方法调用完毕前完成初始化工作.如果字段没有在初始化器中设置初始值,那么它就应该在构造方法中初始化. 类型一旦被实例化,那么它就应该被视为具 ...

  2. [LintCode笔记了解一下]44.Minimum Subarray

    这道题和max subarray很类似,我用local 和 global 的dp方式阔以解决这道 那么我们来看动态规划的四个要素分别是什么? State: localmin[i] 表示以当前第i个数最 ...

  3. js学习日记-对象字面量

    一.对象字面量语法 var person={ name:'小王', age:18, _pri:233 } 成员名称的单引号不是必须的 最后一个成员结尾不要用逗号,不然在某些浏览器中会抛出错误 成员名相 ...

  4. mvn -v提示Permission denied

    解决办法: 增加权限 chmod a+x  /usr/local/apache-maven-3.5.2/bin/mvn 解释: (a:所有用户  +:增加权限   x:执行权限)

  5. Eclipse中mvn install 报错error in opening zip file

    报错信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (de ...

  6. 牛客网提高组模拟赛第七场 T3 洞穴(附bitset介绍)

    就是DP. 我们可以很简单的想到要枚举中间点,进行边数的转移. 但是因为边长数据范围很大,所以我们考虑log的倍增. 状态设计为\(dp[i][j][k]\),为从节点\(i\)走\(2^k\)步能否 ...

  7. Metabase 从 H2 迁移到 MySQL 踩坑指南

    写在前面的话 首先如果你看到了这篇文章,可能你就已经指定 Metabase 是啥了,我这里还是简单的做个说明: Metabase is the easy, open source way for ev ...

  8. css3箭头

    <!DOCTYPE html> <html lang="en" class="muui-theme-webapp-main"> < ...

  9. luoguP3359 改造异或树

    https://www.luogu.org/problemnew/show/P3359 因为 a ^ b ^ b = a,所以我们预处理 1 到所有点的距离,将删边的操作反过来变成加边,对于每一个联通 ...

  10. MySql数据库,对varchar类型字段str进行where str=0条件查询时,查询结果是什么

    在用MySQL查询数据的时候,遇到了一个奇怪的问题.用一个varchar类型的字符串str,作为条件与0比较时,会查str不为0的数据. 比如:SELECT id, idnumber from hr_ ...