十八. JSON-数据存储

国维
140 阅读8分钟

十八. JSON-数据存储

18.1. 认识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作为存储格式；

18.2. 基本语法

JSON的顶层支持三种类型的值：(一个json文件全局只能有一种类型的值)

  • 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
  • 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
  • 数组值：数组的值可以是简单值、对象值、数组值；

18.3. JSON序列化

某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理：

  • 比如我们希望将一个对象保存到localStorage中；

  • 但是如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果；

    image-20220325184702734.png

在ES5中引用了JSON全局对象，该对象有两个常用的方法：

  • stringify方法：将JavaScript类型转成对应的JSON字符串；
  • parse方法：解析JSON字符串，转回对应的JavaScript类型；
 const obj = {
     name: 'why',
     age: 18,
     friends: {
         name: 'zhangsan'
     }
 }
 ​
 const obj1 = JSON.stringify(obj) // 将obj转成json格式的字符串
 localStorage.setItem("obj", obj1) // 将对象存储在localStorage
 ​
 const obj1Json = localStorage.getItem("obj") // 取出json格式的字符串 
 const obj2 = JSON.parse(obj1Json) // 将JSON格式的字符串转回对象

18.4. Stringify使用细节

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串：

  • 如果指定了一个 replacer 函数，则可以选择性地替换值；
  • 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；
 const obj = {
     name: 'why',
     age: 18,
     friends: {
         name: 'zhangsan'
     },
     // toJSON: function () {
     //     return "123456"
     // }
 }
 ​
 // 1.直接转化
 const jsonString1 = JSON.stringify(obj)
 ​
 // 2.stringify第二个参数replacer
 // 2.1. 传入数组: 设定哪些是需要转换
 const jsonString2 = JSON.stringify(obj, ["name", "age"])
 // 2.2. 传入回调函数,转化每个键值对都会回调这个函数
 const jsonString3 = JSON.stringify(obj, (key, value) => {
     if (key === "age") return value += 1
     return value
 })
 ​
 // 3.stringify第三参数 space，可读性变强，可控制缩进
 const jsonString4 = JSON.stringify(obj, null, "--")
 ​
 // 4.如果obj对象中有toJSON方法,obj会被转成toJSON的返回值

18.5. parse使用细节

 // json在进行反序列化的时候是不支持单引号的
 // 单引号必须写在括号外，每个属性都必须双引号引起来，否则会抛出异常
 const JSONString1 = '{"name":"why","age":19,"friends":{"name":"kobe"},"hobbies":["篮球","足球"]}'
 const info = JSON.parse(JSONString1, (key, value) => {
     if (key === "age") return age - 1
     return value
 })

18.6. 使用JSON序列化深拷贝

另外我们生成的新对象和之前的对象并不是同一个对象：

  • 相当于是进行了一次深拷贝；

注意：这种方法它对函数是无能为力的

  • 创建出来的info中是没有foo函数的，这是因为stringify并不会对函数进行处理；
 const obj = {
     name: "why",
     age: 18,
     friends: {
         name: "kobe"
     },
     hobbies: ["篮球", "足球"],
     foo: function () {
         console.log("foo function")
     }
 }
 ​
 // 将obj对象的内容放到info变量中  
 // 1.浅拷贝:将obj拷贝一份到info2，但两个对象中引用类型的属性都指向一个地址
 const info2 = {
     ...obj
 } 
 ​
 // 2.stringify和parse来实现深拷贝，两个对象中引用类型的属性都指向不同地址
 // obj和info3是完全独立的对象
 const jsonString = JSON.stringify(obj) 
 const info3 = JSON.parse(jsonString) 
 console.log(info3)

18.7. 认识Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

  • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
  • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

18.8. localStorage和sessionStorage的区别

  • 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
  • 在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
  • 在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

18.9. 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；

 // 1.setItem
 localStorage.setItem("name", "coderwhy")
 localStorage.setItem("age", 18)
 ​
 // 2.length
 console.log(localStorage.length)
 for (let i = 0; i < localStorage.length; i++) {
   const key = localStorage.key(i)
   console.log(localStorage.getItem(key))
 }
 ​
 // 3.key方法
 console.log(localStorage.key(0))
 ​
 // 4.getItem(key)
 console.log(localStorage.getItem("age"))
 ​
 // 5.removeItem
 localStorage.removeItem("age")
 ​
 // 6.clear方法
 localStorage.clear()

18.10. Storage的工具类封装

在开发中，为了让我们对Storage使用更加方便，我们可以对其进行一些封装：

 class HYcache {
   constructor(isLocal = true) {
     this.storage = isLocal ? localcache : sessioncache
   }
 ​
   setItem(key, value) {
     if (value) {
       this.storage.setItem(key, JSON.stringify(value))
     }
   } 
   getItem(key) {
     const value = this.storage.getItem(key)
     if (value) {
       return JSON.parse(value)
     }
   }
   removeItem(key) {
     this.storage.removeItem(key)
   }
   clear() {
     this.storage.clear()
   }
   key(index) {
     return this.storage.key(index)
   }
   length() {
     return this.storage.length
   }
 }
 ​
 const localcache = new HYcache()
 const sessioncache = new HYcache(false)

18.11. 认识IndexedDB

什么是IndexedDB呢？

  • 在实际的开发中，大量的数据都是存储在数据库的，客户端主要是请求这些数据并且展示；
  • 有时候我们可能会存储一些简单的数据到本地（浏览器中），比如token、用户名、密码、用户信息等，比较少存储大量的数据；
  • 那么如果确实有大量的数据需要存储，这个时候可以选择使用IndexedDB；

IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据。

  • 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）；
  • IndexDB本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可；

18.12. 认识Cookie

Cookie（复数形态Cookies），又称为“小甜饼”。类型为“小型文本文件，某些网站为了辨别用户身份而存储在用户本地终端（Client Side）上的数据。

  • 浏览器会在特定的情况下携带上cookie来发送请求，我们可以通过cookie来获取一些信息；

Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie。

  • 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；
  • 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理；

如果判断一个cookie是内存cookie还是硬盘（本地）cookie呢？

  • 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除；
  • 有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除

cookie常见的属性

cookie的生命周期：

  • 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除；

  • 我们可以通过设置expires或者max-age来设置过期的时间；

    • expires：设置的是Date.toUTCString()，设置格式是;expires=date-in-GMTString-format；
    • max-age：设置过期的秒钟，;max-age=max-age-in-seconds (例如一年为60* 60* 24*365)；

cookie的作用域：（允许cookie发送给哪些URL）

  • Domain：指定哪些主机可以接受cookie

    • 如果不指定，那么默认是 origin，不包括子域名。
    • 如果指定Domain，则包含子域名。例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）。

  • Path：指定主机下哪些路径可以接受cookie

    • 例如，设置 Path=/docs，则以下地址都会匹配：
    • /docs
    • /docs/Web/
    • /docs/Web/HTTP

客户端设置cookie

js直接不能直接获取cookie，打印是''；但是可以设置cookie

  • document.cookie()

不设置过期时间，就是内存cookie

  • document.cookie = "name=coderwhy"
  • document.cookie = "age=18"

设置过期时间(默认单位是秒钟)

  • document.cookie = "name=coderwhy;max-age=10"

Cookie的缺点

  1. 将Cookie附加到每一次请求里，即使该请求不需要cookie
  2. 在headers里明文传输
  3. 大小限制 4kb
  4. cookie验证登录，如果是Android、ios、小程序需要手动发送cookie
avatar
文章
阅读
粉丝