JSON与storage

JSON

JSON由来

◼ 在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。
◼ JSON的全称是JavaScript Object Notation（JavaScript对象符号）：
         JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是JavaScript的一个子集；
         但是虽然JSON被提出来的时候是主要应用JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用；
         很多编程语言都实现了将JSON转成对应模型的方式；
◼ 其他的传输格式：
         XML：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输等各方面都弱于JSON，所以目前已经很
少在被使用了；
         Protobuf：另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所
以目前在前端使用的较少；
◼ 目前JSON被使用的场景也越来越多：
         网络数据的传输JSON数据；
         项目的某些配置文件；
         非关系型数据库（NoSQL）将json作为存储格式；

JSON基本语法

◼ JSON的顶层支持三种类型的值：
 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
 数组值：数组的值可以是简单值、对象值、数组值；
普通json不支持注释

 JSON序列化

◼ 某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理：
 比如我们希望将一个对象保存到localStorage中；
 但是如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果；

序列化方法

在ES5中引用了JSON全局对象，该对象有两个常用的方法：
 stringify方法：将JavaScript类型转成对应的JSON字符串；
 parse方法：解析JSON字符串，转回对应的JavaScript类型；
◼ 那么上面的代码我们可以通过如下的方法来使用：

 
    // 1.将obj对象进行序列化
    var objJSONString = JSON.stringify(obj)
    console.log(objJSONString)
 
    // 2.将对象存储到localStorage
    localStorage.setItem("info", objJSONString)
     
    var item = localStorage.getItem("info")
    console.log(item, typeof item)
 
    // 3.将字符串转回到对象(反序列化)
    var newObj = JSON.parse(item)
    console.log(newObj)

Stringify的参数replace与space

◼ JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串：
 如果指定了一个 replacer 函数，则可以选择性地替换值；
 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；

◼ JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
 提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。
◼ JSON的方法可以帮我们实现对象的深拷贝：

    // 1.replacer参数
     var objJSONString = JSON.stringify(obj, function(key, value) {
       if (key === "name") {
         return "coderwhy"
       }
       return value
     }, "")
     console.log(objJSONString)
 
    // 2.space参数
     var objJSONString = JSON.stringify(obj, null, 4)
     console.log(objJSONString)
 
    // 3.如果对象本身有显示toJSON方法, 那么直接调用toJSON方法
    var objJSONString = JSON.stringify(obj)
    console.log(objJSONString)
 

    var objJSONString = JSON.stringify(obj)
    console.log(objJSONString)
 
    var newObj = JSON.parse(objJSONString, function(key, value) {
      if (key === "age") {
        return value + 2
      }
      return value
    })
    console.log(newObj)

6.Storage

◼ WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：
 localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
 sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

 我们会发现localStorage和sessionStorage看起来非常的相似。
◼ 那么它们有什么区别呢？
 验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
 验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
 验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；
◼ Storage有如下的属性和方法：
◼ 属性：
 Storage.length：只读属性
✓ 返回一个整数，表示存储在Storage对象中的数据项数量；
◼ 方法：
 Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
 Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
 Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。
✓ 如果key存储，则更新其对应的值；
 Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
 Storage.clear()：该方法的作用是清空存储中的所有key；