Json,Json序列化和反序列化,localStorage,sessionStorage,Cookie和IndexDB

1.Json及书写规则

2.Json序列化和反序列化,及深拷贝的应用和缺点

3.localStorage和sessionStorage及区别和方法

4.Cookie及其分类和属性

5.IndexDB

1.Json及书写规则

Json是一种数据格式，有以下书写规则

1）value可以是字符串，数组，对象，数字，null，布尔值，不能是undefined

2）里面不能出现单引号，只能有双引号

3）key需要用双引号包裹

4）对象最后一个value后面不能跟，

示例：

{
	"a": null,
	"b": 1,
	"c": {
		"d": "d"
	},
	"e": [true]
}

2.Json序列化和反序列化,及深拷贝的应用和缺点

1）Json序列化 Json.stringify()，可以把复杂数据类型转化为Json格式

a.简单数据类型的转化：转化前后对比看下面代码，undefined和string转化前后不变，symbol转化后变成undefined，数字和布尔值转化后变成字符串

// 转化null
let a=JSON.stringify(null)
console.log(typeof a);//string  不再是null类型
console.log(a)//null
// 转化Symbol
let c=JSON.stringify(Symbol('d'))
console.log(c);//undefined
// 转化布尔值
let e=JSON.stringify(true)
console.log(e===true);//false
console.log(typeof e);//string
// 转化undefined
let f=JSON.stringify(undefined)
console.log(f===undefined);//true
// 转化数字
let g=JSON.stringify(1)
console.log(typeof g);//string

b.Json.stringify()的第二个参数和第三个参数

第二个参数：

a.传入对象，使用函数

let obj={a:1,b:2,c:{d:33}}
// 第一个参数如果是对象，并且传入一个函数，他会获取传入的对象，对其循环直到value不再是复杂数据类型
// 第一次循环的key是没有的 值就是这个对象 看其ts参数提示的时候当是函数的时候第一个参数是this,第二个参数是key，第三个参数是value，但是
// 真实使用的时候传入了看打印其实只有两个参数，第一个是key，第二个是value
let a=JSON.stringify(obj,(key,value)=>{
  console.log(key,1);
  console.log(value,2);
  return value
})
//  1
//  {a: 1, b: 2, c: {…}} 2
//  a 1
//  1 2
//  b 1
//  2 2
//  c 1
//  {d: 33} 2
//  d 1
//  33 2

b.传入数组，使用函数

let obj=[1,2,3]
// 如果传入的是数组，其他和对象一样，不一样的是key是索引值了
let a=JSON.stringify(obj,(key,value)=>{
  console.log(key,1);
  console.log(value,2);
  return value
})
// 1
// [1, 2, 3] 2
// 0 1
// 1 2
// 1 1
// 2 2
// 2 1
// 3 2

 c.对象，使用数组

let obj={a:1,b:2,c:{d:33}}
let a=JSON.stringify(obj,['c'])
console.log(a);//{"c":{}}
// 由结果可知，当传入数组后，会返回数组里有的key，并且下一层的key如果不再数组内，也是不会返回的

d.数组，使用数组

let obj=[1,2,3,{a:'a'}]
let a=JSON.stringify(obj,[])
console.log(a);//[1,2,3,{}]
let b=JSON.stringify(obj,['a'])
console.log(b);//[1,2,3,{"a":"a"}]
//如果第一个参数是数组，第二个参数也是数组，则数组里的第一层都会被返回，第二层则看第二个参数

注意：如果传入的是一个对象，如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果，而不会执行第二个参数的内容

第三个参数：

let obj=[1,2,3,{a:'a'}]
// 第三个参数传入的如果是数字，就会在每个value前都会加空格
let a=JSON.stringify(obj,null,2)
console.log(a);
// [
//   1,
//   2,
//   3,
//   {
//     "a": "a"
//   }
// ]

let obj=[1,2,3,{a:'a'}]
// 第三个参数传入的如果是字符串，就会在每个value前都会加这个字符串
let a=JSON.stringify(obj,null,'__')
console.log(a);
// [
//   __1,
//   __2,
//   __3,
//   __{
//   ____"a": "a"
//   __}
//   ]

 2）反序列化 Json.parse（） 把Json类型转回js数据类型

第二个参数和序列化的时候使用方式一样

3）深拷贝的应用：序列化后再反序列化即可，缺点是对于函数和symbol不能拷贝

 3.localStorage和sessionStorage及区别和方法

这两个都是浏览器缓存，区别是前一个当浏览器关闭或者打开同一个网站的新的页面（就比如我们的项目里有个按钮，是个a标签，点击后的打开方式是一个新页面，而不是页面跳转，这个时候这个新页面是不会把后一个缓存给带过去的）还会存在

localStorage方法示例（sessionStorage也是一样的方法）：

let obj={'a':1}
// 添加缓存
localStorage.setItem('a',JSON.stringify(obj))
// 获取缓存
let b=localStorage.getItem('a')
console.log(b);//{"a":1}
// 根据缓存位置获取缓存的key值 注意最近添加的key值是0 在最上面
console.log(localStorage.key(0));//{"a":1}
//获取缓存长度
localStorage.setItem('b',JSON.stringify(obj))
localStorage.setItem('c',JSON.stringify(obj))
console.log(localStorage.length);//3
// 移除某个缓存
localStorage.removeItem('b')
// 清除所有缓存
localStorage.clear()

4.Cookie及其分类和属性

1）Cookie是浏览器存储的另外一个形式，和前面两个缓存不一样的是，当发起网络请求的时候Cookie是会自动被带上的，并且Cookie最多只能是4k，而前面两个最大的5mb

2）分类：分为硬盘Cookie和内存Cookie，区别就是有没有设置过期时间

3）属性：expires或max-age(二选一即可，两个都设置会无效前一个)   Domain   path   name    value

expires：后面跟GMT时间格式需要用toUTCString或toGMTString方法转化为GMT格式

max-age：后面跟秒

name：后面跟value

path：该域名下哪些页面有cookie。如果设置为/main，/main，/main/a会接受

Domain：哪些子域名可以接受Cookie，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）

HTTPOnly：打钩 代表只能通过http或者https去操作 我们自己不能操作

4）示例：document.cookie ="name=value;expires=2023-07-07T17:55:37.000Z;path=/;Domain=mozilla.org;HTTPOnly"

5）如果要移除设置时间expires为之前的时间即可，或max-age为0

5.IndexDB

是一种在浏览器的事务性数据库，什么是事务性数据库，假如付钱的时候，一个付完钱了，另外一个收到钱了，这个操作才算完成。如果一个付完钱了，另外一个没有收到就不算完成这个事务

let db = null
// 打开数据(和数据库建立连接) 如果没有这个库就会创建这个库
const dbRequest = indexedDB.open("why", 3)
// dbRequest有onerror  onsuccess  onupgradeneeded事件
// 连接数据库失败触发
dbRequest.onerror = function(err) {
  console.log("打开数据库失败~")
}
// 连接数据库成功触发
dbRequest.onsuccess = function(event) {
  db = event.target.result
}
// 第一次打开/或者版本发生升级
dbRequest.onupgradeneeded = function(event) {
  // 创建表存储对象 这里经常用来创建表
  event.target.result.createObjectStore("users", { keyPath: "id" })
}
// 获取btns, 监听点击
const btns = document.querySelectorAll("button")
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    // 打开表 db.transaction(存储名称, 可写操作)
    const transaction = db.transaction("users", "readwrite")
    // 获取数据
    const store = transaction.objectStore("users")
    switch(i) {
      case 0:
          // 新增值
          const add = store.add(user)
          // 监听新增成功
          add.onsuccess = function() {
            console.log(`${user.name}插入成功`)
          }
           // 监听所有操作是否成功
        transaction.oncomplete = function() {
          console.log("添加操作全部完成")
        }
        break
      case 1:
        // 1.查询方式一(知道主键, 根据主键查询)
        // 异步查询 直接给的不是结果 结果在onsuccess里面的event.target.result拿
        // const request = store.get(102)
        // request.onsuccess = function(event) {
        //   console.log(event.target.result)
        // }

        // 2.查询方式二:默认查询第一条 continue会继续触发request.onsuccess 当查完了cursor就会没有值
        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:
        // 删除操作  cursor.delete()
        const deleteRequest = store.openCursor()
        deleteRequest.onsuccess = function(event) {
          const cursor = event.target.result
          cursor.delete()
        }
        break
      case 3:
        // 修改操作
        const updateRequest = store.openCursor()
        updateRequest.onsuccess = function(event) {
          const cursor = event.target.result
              cursor.update("12")
        }
        break
    }
  }
}