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作为存储格式；
小程序的app.json
JSON基本语法
JSON的顶层支持三种类型的值：
- 简单值：字符串（String，不支持单引号）、数字（Number）、布尔类型（Boolean）、null类型；
- 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
- 数组值：数组的值可以是简单值、对象值、数组值；
JSON序列化
某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理。
比如我们希望将一个对象保存到localStorage中，但是如果我们直接存放一个对象，这个对象会被转化成[object Object]格式的字符串，并不是我们想要的结果；
JSON序列化方法
在ES5中引用了JSON全局对象，该对象有两个常用的方法：
- stringify方法：将JavaScript类型转成对应的JSON字符串；
- parse方法：解析JSON字符串，转回对应的JavaScript类型；
那么上面的代码我们可以通过如下的方法来使用：
const obj = {
name: "why",
age: 18,
friends: {
name: "kobe"
},
hobbies: ["篮球", "足球"]
}
// 将obj转成JSON格式的字符串
const objString = JSON.stringify(obj)
// 将对象数据存储localStorage
localStorage.setItem("obj", objString)
const jsonString = localStorage.getItem("obj")
// 将JSON格式的字符串转回对象
const info = JSON.parse(jsonString)
console.log(info)
Stringify()的其他细节
- Stringify的第二个参数replace。
- 如果指定的 replace 是数组，则可选择性地仅包含数组指定的属性；
- 如果指定了一个 replace 函数，则可以选择性地使用函数的返回值替换值；
- 当然，它还可以跟上第三个参数space，用于指定使用什么缩进。
- 如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果：
具体演示如下：
const obj = {
name: "why",
age: 18,
friends: {
name: "kobe"
},
hobbies: ["篮球", "足球"],
// toJSON: function() {
// return "123456"
// }
}
// 需求: 将上面的对象转成JSON字符串
// 1.直接转化
const jsonString1 = JSON.stringify(obj)
console.log(jsonString1)
// 2.stringify第二个参数replace
// 2.1. 传入数组: 设定哪些是需要转换
const jsonString2 = JSON.stringify(obj, ["name", "friends"])
console.log(jsonString2)
// { name: "why", friends: {name: "kobe"} }
// 2.2. 第二个参数,传入回调函数
const jsonString3 = JSON.stringify(obj, (key, value) => {
if (key === "age") {
return value + 1 // 遇到age,直接加1
}
return value
})
console.log(jsonString3)
// 3.stringify第三参数 space
// 第三个参数是指定每个key之间使用什么缩进,如果传入数字,默认就是空格,当然也可以传字符串
// 这个参数主要是为了可读性
const jsonString4 = JSON.stringify(obj, null, "---")
console.log(jsonString4)
// 4.如果obj对象中有toJSON方法, 则直接使用这个对象的toJSON方法的返回值
// "123456"
parse()的其他细节
parse()的第二个参数可以传入一个回调函数reviver，提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
const JSONString = '{"name":"why","age":19,"friends":{"name":"kobe"},"hobbies":["篮球","足球"]}'
const info = JSON.parse(JSONString, (key, value) => {
if (key === "age") {
return value - 1
}
return value
})
console.log(info)
使用JSON序列化做深拷贝
const obj = {
name: "why",
age: 18,
friends: {
name: "kobe"
},
hobbies: ["篮球", "足球"],
foo: function() {
console.log("foo function")
}
}
// 将obj对象的内容放到info变量中
// 1.引用赋值, info和obj都指向同一个对象
const info = obj
obj.age = 100
console.log(info.age) // 100
// 2.浅拷贝
// 使用展开运算符,或者使用Object.assign()
// 只有第一层拷贝,第二层就是引用赋值
const info2 = { ...obj }
obj.age = 1000
console.log(info2.age) // 18
obj.friends.name = "james"
console.log(info2.friends.name) // james
// 3.stringify和parse来实现
const jsonString = JSON.stringify(obj)
console.log(jsonString)
const info3 = JSON.parse(jsonString)
obj.friends.name = "curry"
console.log(info3.friends.name) // kobe
console.log(info3)
注意：这种方法它对函数是无能为力的，因为我们上面说过了，JSON的顶层支持类型就没有函数。
创建出来的info中是没有foo函数的，这是因为stringify并不会对函数进行处理，我们后续会讲解如何编写深拷贝的工具函数，那么这样就可以对函数的拷贝进行处理了。
认识Storage
WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：
- localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
- sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；
localStorage和sessionStorage的区别
我们会发现localStorage和sessionStorage看起来非常的相似。那么它们有什么区别呢？
- 关闭网页再重新打开，localStorage会保留，而sessionStorage会被删除；
- 页面跳转打开了新的tab页，localStorage会保留，而sessionStorage会被删除；
- 页面跳转没有打开新的tab页，他们也都会保留
总结：其实一个tab页就是一个会话，同一个会话的sessionStorage会保存。
Storage常见的方法和属性
Storage有如下的属性、方法：
- Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key已存在，则更新其对应的值；
- Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
- Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
- Storage.clear()：该方法的作用是清空存储中的所有key；
- Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
- Storage.length：只读属性，返回一个整数，表示存储在Storage对象中的数据项数量；
// 1.setItem
localStorage.setItem("name", "coderwhy")
localStorage.setItem("age", 18)
// 2.getItem(key)
console.log(localStorage.getItem("age"))
// 3.removeItem
localStorage.removeItem("age")
// 4.clear方法
localStorage.clear()
// 5.key方法
// 获取索引0对应的key
console.log(localStorage.key(0))
// 6.length
console.log(localStorage.length)
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i)
console.log(localStorage.getItem(key))
}
封装Storage
在开发中，为了让我们对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呢？
我们能看到DB这个词，就说明它其实是一种数据库（Database），通常情况下在服务器端比较常见，在实际的开发中，大量的数据都是存储在数据库的，客户端主要是请求这些数据并且展示。
有时候我们可能会存储一些简单的数据到本地（浏览器中），比如token、用户名、密码、用户信息等，比较少存储大量的数据，那么如果确实有大量的数据需要存储，这个时候可以选择使用IndexedDB。
IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据的数据库。它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）。IndexDB本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可。
IndexDB的连接数据库
- 第一步：打开indexDB的某一个数据库；
- 通过indexDB.open(数据库名称, 数据库版本)方法；
- 如果数据库不存在，那么会创建这个数据；
- 如果数据库已经存在，那么会打开这个数据库；
- 第二步：通过监听回调得到数据库连接结果；
- 数据库的open方法会得到一个IDBOpenDBRequest类型
- 我们可以通过下面的三个回调来确定结果：
-
- onerror：当数据库连接失败时；
-
- onsuccess：当数据库连接成功时回调；
-
- onupgradeneeded：当数据库的version发生变化并且高于之前版本时回调；
-
-
- 通常我们在这里会创建具体的存储对象：db.createObjectStore(存储对象名称, { keypath: 存储的主键 })
-
- 我们可以通过onsuccess回调的event获取到db对象：event.target.result
IndexedDB的数据库操作
我们对数据库的操作要通过事务对象来完成：
- 第一步：通过db获取对应存储的事务 db.transaction(存储名称, 可写操作)；
- 第二步：通过事务获取对应的存储对象 transaction.objectStore(存储名称)；
接下来我们就可以进行增删改查操作了：
- 新增数据 store.add
- 查询数据
- 方式一：store.get(key)
- 方式二：通过 store.openCursor 拿到游标对象，进行查询
-
- 在request.onsuccess中获取cursor：event.target.result
-
- 获取对应的key：cursor.key；
-
- 获取对应的value：cursor.value；
-
- 可以通过cursor.continue来继续执行；
- 修改数据 cursor.update(value)
- 删除数据 cursor.delete()
IndexedDB增删改查的小案例
// 一个数据库软件有不止一个数据库,一个数据库中又有不止一张表
// 1. 打开数据(和数据库建立连接)
// 第一个参数是数据库名字,第二个参数是版本
const dbRequest = indexedDB.open("why", 3)
dbRequest.onerror = function(err) {
console.log("打开数据库失败~")
}
let db = null
// 当数据库连接成功时回调
dbRequest.onsuccess = function(event) {
db = event.target.result
}
// 第一次打开/或者版本发生升级
dbRequest.onupgradeneeded = function(event) {
const db = event.target.result
console.log(db)
// 创建一些存储对象, 其实就相当于一个表
// keyPath是作为这张表的主键
db.createObjectStore("users", { keyPath: "id" })
}
// 准备数据
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),
]
// 获取btns, 监听点击
const btns = document.querySelectorAll("button")
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 获取事务
const transaction = db.transaction("users", "readwrite")
console.log(transaction)
// 获取事务对应的表
const store = transaction.objectStore("users")
switch(i) {
case 0:
console.log("点击了新增")
for (const user of users) {
// 新增数据
const request = store.add(user)
// 一次添加成功的回调
request.onsuccess = function() {
console.log(`${user.name}插入成功`)
}
}
// 事务完成的回调
transaction.oncomplete = function() {
console.log("添加操作全部完成")
}
break
case 1:
console.log("点击了查询")
// 1.查询方式一(知道主键, 根据主键查询)
// const request = store.get(102)
// request.onsuccess = function(event) {
// console.log(event.target.result)
// }
// 2.查询方式二:根据游标查询
const request = store.openCursor()
request.onsuccess = function(event) {
const cursor = event.target.result
if (cursor) {
if (cursor.key === 101) {
// 打印查询的数据
console.log(cursor.key, cursor.value)
} else {
// 继续查询
cursor.continue()
}
} else {
console.log("查询完成")
}
}
break
case 2:
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("查询完成")
}
}
break
case 3:
console.log("点击了修改")
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("查询完成")
}
}
break
}
}
}
认识Cookie
Cookie是服务端为了辨别用户身份而存储在客户端的数据，Cookie主要是服务端设置的，在响应头里面，当然客户端也可以设置，当浏览器发现服务端的响应数据里面有cookie的时候，会自动将cookie存到客户端。当浏览器发送网络请求的时候会自动携带cookie，在请求头里面，我们也可以通过cookie获取一些信息。
Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie。
- 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；
- 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理；
如何判断一个cookie是内存cookie还是硬盘cookie呢？看看有没有过期时间。
- 如果没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除；
- 如果有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘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 (例如一年为606024*365)；
- cookie的作用域：（允许cookie发送给哪些URL）
- Domain：指定哪些主机可以接受cookie
-
- 如果不指定，那么默认是 origin，不包括子域名。（比如向www.baidu.com发请求，默认只有www.baidu.com/test之类的可以携带cookies）
-
- 如果指定Domain，则包含子域名。例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org也会携带Cookies）。
- Path：指定主机下哪些路径可以接受cookie，例如，设置 Path=/docs，则以下地址都会匹配：
-
- /docs
-
- /docs/Web/
-
- /docs/Web/HTTP
客户端设置cookie
通过document.cookie是拿不到cookie的，但是我们可以设置cookie。
如果设置的时候没有设置过期时间，那就是内存cooki e，这个cookie会在会话关闭时被删除掉：
设置cookie，同时设置过期时间（默认单位是秒钟），就是硬盘Cookies。
客户端删除cookie是通过设置过期时间为0：
document.cookie = 'name='';max-age=0'
Cookie的缺点
- 明文传输，即使加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目。
- 不同浏览器对cookie条数的限制不同，而且每个cookie长度不能超过4KB
- 有些请求是不需要携带cookie的，这也造成了网络资源的浪费
