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和数据存储

JSON

应用场景：

基本语法：

JSON序列化

JSON方法

序列化方法 JSON.stringify()

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

应用

数据存储

Storage

localStorage和sessionStorage的区别

Storage常见方法和属性

Storage的工具类的封装

IndexedDB

IndexedDB数据库的使用

前置工作——连接数据库

使用数据库

新增操作

查询操作

修改操作

删除操作

Cookie

Cookie分类

cookie常见属性

cookie的生命周期：

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

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JSON和数据存储

JSON

应用场景：

基本语法：

JSON序列化

JSON方法

序列化方法 JSON.stringify()

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

应用

数据存储

Storage

localStorage和sessionStorage的区别

Storage常见方法和属性

Storage的工具类的封装

IndexedDB

IndexedDB数据库的使用

前置工作——连接数据库

使用数据库

新增操作

查询操作

修改操作

删除操作

Cookie

Cookie分类

cookie常见属性

cookie的生命周期：

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

热门文章

最新文章

相关课程

相关电子书