JSON

🤔在开发的时候我们会经常遇到JSON，JSON到底是什么？
JSON是一种非常重要的 数据格式（用来保存一部分数据），它并 不是编程语言，而是一种可以在服务器和客户端之间 传输的数据格式。

应用场景：

网络数据的传输JSON数据；
项目的某些配置文件；
非关系型数据库（NoSQL）将json作为存储格式；

基本语法：

JSON的顶层支持三种类型的值：

简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；

对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；

{
  "name":"eureka",
  "age": 19
}

数组值：数组的值可以是简单值、对象值、数组值；

[
  123,
  {
    "name":"Eureka"
  }
]

🚨 注意：JSON不能加注释，而且属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号。

JSON序列化

在MDN上提到： JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同： JavaScript 不是 JSON，JSON 也不是 JavaScript。
🤔为什么需要JSON序列化呢？

场景：将对象数据存储到localStorage

const obj = {
  name: 'eureka',
  age: 19,
  hobby:['滑板']
}

localStorage.setItem("obj",obj)

如果直接将obj对象存储到localStorage，setItem会将对象类型转成string，而obj对象转成string类型，则会转成**"[object object]"**,我们要存储的内容根本存不到localStorage里面。

所以我们需要将对象JSON序列化：

const obj = {
  name: 'eureka',
  age: 19,
  hobby:['滑板']
}
// 将obj转成JSON格式的字符串
const objString = JSON.stringify(obj)

// 将对象数据存储localStorage
localStorage.setItem("obj", objString)

这样就可以将对象数据存储到localStorage里面了

而我们之后要用到JSON序列化之后的数据则要将其解析才能使用：

const jsonString = localStorage.getItem("obj")

// 将JSON格式的字符串转回对象
const info = JSON.parse(jsonString)
console.log(info)

JSON方法

序列化方法 JSON.stringify()

返回与指定值对应的 JSON 字符串，可以通过额外的参数，控制仅包含某些属性，或者以自定义方法来替换某些 key 对应的属性值。

上面代码一样直接转化
stringfy第二个参数：replacer

如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；

// 对key和value起到一个拦截作用
const jsonString3 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return value + 1
  }
  return value
})
console.log(jsonString3)

如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；

// 相当于起到了过滤的作用
const jsonString2 = JSON.stringify(obj, ["name", "hobby"])
console.log(jsonString2)

stringfy第三个参数space

指定缩进用的空白字符串，用于美化输出（pretty-print）；

如果该参数没有提供（或者为 null），将没有空格。
如果参数是个数字，它代表有多少的空格；上限为 10。该值若小于 1，则意味着没有空格；
如果该参数为字符串（当字符串长度超过 10 个字母，取其前 10 个字母），该字符串将被作为空格；

const jsonString4 = JSON.stringify(obj, null, "---")
console.log(jsonString4)

如果obj对象中有toJSON方法，则转化JSON字符串时会转化成toJSON方法内容的字符串

const obj = {
  name: 'eureka',
  age: 19,
  hobby:['滑板'],
  toJSON: function() {
    return "123456"
  }
}

解析JSON字符串方法 JSON.parse()

解析 JSON 字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性，在返回之前进行某些修改。

上面代码一样直接转化
parse第二个参数：reviver

const info = JSON.parse(JSONString, (key, value) => {
  if (key === "age") {
    return value - 1
  }
  return value
})
console.log(info)

应用

了解引用赋值和浅拷贝，主要是理解利用JSON序列化深拷贝

// obj 对象
const obj = {
  name: "why",
  age: 18,
  friends: {
    name: "kobe"
  },
  hobbies: ["篮球", "足球"],
  foo: function() {
    console.log("foo function")
  }
}

引用赋值

const info = obj

浅拷贝（相当于将原对象赋值一份到新对象中，但对象里面的属性对应的是另一个对象（属性是引用类型），则原对象和新对象里面的引用类型属性对应的是同一个）

const info2 = { ...obj }
obj.age = 1000
console.log(info2.age) // 改变obj的属性值，info2中的属性值不变

obj.friends.name = "james"
console.log(info2.friends.name) // 会改变，因为obj和info2中的friends用的是同一个

利用stringify和parse来实现深拷贝（让原对象和新对象完全没有关系）

const jsonString = JSON.stringify(obj)
console.log(jsonString)
const info3 = JSON.parse(jsonString)
obj.friends.name = "curry"
console.log(info3.friends.name)
console.log(info3)

数据存储

Storage

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

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

sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

localStorage.setItem("obj", "localStorage")  // (key value)
sessionStorage.setItem("name", "sessionStorage")

localStorage和sessionStorage的区别

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

Storage常见方法和属性

适用于 localStorage和 sessionStorage

属性：
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)
// 利用length属性对localStorage进行遍历
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()

因为我们从Srorage存入或取出都要对其内容做一个转化（JSON序列化/JSON解析），为了更好的使用，所以要对其进行封装

Storage的工具类的封装

class HYCache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage: sessionStorage
  }

  setItem(key, value) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getItem(key) {
    let value = this.storage.getItem(key)
    if (value) {
      value = JSON.parse(value)
      return 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)

export {
  localCache,
  sessionCache
}

IndexedDB

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

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

相对于Storage存储字符串的方式，IndexedDB以数据库的方式来存储数据更加方便我们检索数据（数据库操作效率更高）

IndexedDB数据库的使用

IndexedDB数据库增删改查

前置工作——连接数据库

打开indexedDB的某一个数据库

通过indexDB.open(数据库名称, 数据库版本)方法；

// 打开数据(和数据库建立连接)
const dbRequest = indexedDB.open("why", 3)

如果数据库不存在，那么会创建这个数据；
如果数据库已经存在，那么会打开这个数据库；

通过监听回调得到数据库连接结果：
数据库的open方法会得到一个IDBOpenDBRequest类型

拿到这个对象之后可以使用一些回调函数去监听连接数据库的状态：

onerror：当数据库连接失败时；

dbRequest.onerror = function(err) {
  console.log("打开数据库失败~")
}

onsuccess：当数据库连接成功时回调；（可以拿到db对象了）

let db = null
dbRequest.onsuccess = function(event) {
  db = event.target.result
}

onupgradeneeded：当数据库的version发生变化并且高于之前版本时回调；
- 通常我们在这里会创建具体的存储对象：db.createObjectStore(存储对象名称, { keypath: 存储的主键 })

// 第一次打开/或者版本发生升级
dbRequest.onupgradeneeded = function(event) {
  const db = event.target.result
  console.log(db)

  // 创建一些存储对象，keyPath 指的是主键
  db.createObjectStore("users", { keyPath: "id" })
}

使用数据库

我们对数据库的操作要通过事务对象来完成，所以我们要先创建一个事务对象

第一步：通过db获取对应存储的事务 db.transaction(想要操作的表名称, 操作)；
第二步：通过事务获取对应的存储对象 transaction.objectStore(想要操作的表名称,)；

const transaction = db.transaction("users", "readwrite") // readwrite 即可以读又可以写
const store = transaction.objectStore("users")

想要进行操作的对象：

class User {
  constructor(id, name, age) {
    this.id = id
    this.name = name
    this.age = age
  }
}

const users = [
  new User(100, "why", 18),
  new User(101, "kobe", 40),
  new User(102, "james", 30),
]

新增操作

for (const user of users) {
  const request = store.add(user)
  // 通过onsuccess来监听本次操作是否成功
  request.onsuccess = function() {
         console.log(`${user.name}插入成功`)
    }
}
// 通过oncomplete来监听本次事务所有操作是否完成
transaction.oncomplete = function() {
    console.log("添加操作全部完成")
}

查询操作

查询方式一(知道主键, 根据主键查询)

const request = store.get(102)
request.onsuccess = function(event) {
    console.log(event.target.result)
}

查询方式二:

通过openCursor（游标）来查询

const request = store.openCursor()
request.onsuccess = function (event) {
   const cursor = event.target.result
  // 先判断有没有值
       if (cursor) {
           // 101是我们想要查询的值
          if (cursor.key === 101) {
             console.log(cursor.key, cursor.value)
          } else {
             cursor.continue()
          } 
       } else {
        console.log("查询完成")
       }
}

修改操作

通过update方法进行修改

 const updateRequest = store.openCursor()
  updateRequest.onsuccess = function (event) {
       const cursor = event.target.result
     if (cursor) {
        if (cursor.key === 101) {
          const value = cursor.value;
          value.name = "curry"
          cursor.update(value)
        } else {
           cursor.continue()
        }
       } else {
          console.log("修改完成")
       }
 }

删除操作

const deleteRequest = store.openCursor()
deleteRequest.onsuccess = function (event) {
    const cursor = event.target.result
    if (cursor) {
       if (cursor.key === 101) {
           cursor.delete()
        } else {
            cursor.continue()
        }
      } else {
        console.log("删除完成")
      }
}

Cookie

类型为“小型文本文件，某些网站为了辨别用户身份而存储在用户本地终端
（Client Side）上的数据

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

Cookie分类

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

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

如果判断一个cookie是内存cookie还是硬盘cookie呢？

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

通过KOA来实现服务器设置Cookie并在下次请求中携带Cookie的过程：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();

const testRouter = new Router();

// 登录接口
testRouter.get('/test', (ctx, next) => {
  // maxAge对应毫秒
  ctx.cookies.set("name", "why", {
    maxAge: 60 * 1000,  // 设置过期时间
    httpOnly: false
  })

  ctx.body = "test";
});


testRouter.get('/demo', (ctx, next) => {
  // 读取cookie
  const value = ctx.cookies.get('name');
  ctx.body = "你的cookie是" + value;
});

app.use(testRouter.routes());
app.use(testRouter.allowedMethods());

app.listen(8000, () => {
  console.log("服务器启动成功~");
})

cookie常见属性

cookie的生命周期：

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

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

expires：设置的是Date.toUTCString()，设置格式是;expires=date-in-GMTString-format；
max-age：设置过期的秒钟，;max-age=max-age-in-seconds (例如一年为606024*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使用的越来越少了，原因如下：

取而代之的是token

JSON和数据存储