JSON

JSON(JavaScript Object Notation JS对象符号)是一种重要的数据格式

其他传输数据格式

XML

一种标记语言，但在解析传输等各方面都弱于JSON，因此如今很少用于传输数据

Protobuf

在许多语言中支持，直至2021年的3.x版本才支持JavaScript，所以目前使用较少

使用场景

数据传输中作为数据格式
配置文件
非关系数据库中作为存储格式

基本语法

基础数据类型

Number数字
String字符串
Boolean布尔
null空

对象类型

{
 "key1":value1,
 "key2":value2,
 ···,
 "keyn":valuen
}

数组类型

[value1,vaue2,···,vuluen]

序列化

JSON.stringify()

var obj={name:'rv',age:20}
// 直接转化
JSON.stringify(obj);
// 选择转化
JSON.stringify(obj,['name']);
// 拦截转化
JSON.stringify(obj,(key,value)=>{
  if(key==='age'){
    value-=10;
  }
  return value;
})
// 第三个参数:space开启缩进，美化JSON
JSON.stringify(obj,null,2);
JSON.stringify(obj,null,'\t');
// toJSON方法
/* 如果obj对象中存在toJSON方法，在序列化时则会调用toJSON方法一一转化每一条属性 */

JSON.parse()

var str='{"name":"rv","age":20}'
// 直接解析
JSON.parse(str)
// 拦截解析
JSON.parse(str,(key,value)=>{
   if(key==='age'){
    value+=10;
  }
  return value;
})

本地存储方案

WebStorage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的键值对存储方式

localStorage
- 本地存储，提供一种永久存储方式
sessionStorage
- 会话存储，提供本次会话的存储

Storage常见方法和属性

属性
- length数据项数量
方法
- key(index)返回第index个key
- getItem(key)返回数据项对应value
- setItem(key,value)新增或更新数据项
- removeItem(key)删除数据项
- clear()清空存储

IndexedDB

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

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

1.打开数据库，与数据库建立连接

/*  打开数据库 
若没有则自动创建IndexedDB
*/
const dbRequest=indexedDB.open('rv')
/* 监听回调 */
// 失败回调
dbRequest.onerror(err=>{
  console.log('失败',err)
})
// 成功回调(常用于获取DB操作对象)
let db=null
dbRequest.onsuccess(event=>{
  db=event.target.result
})
// 首次打开或版本发生更新回调
dbRequest.onupgradeneeded(event=>{
  // 获取数据库操作对象
  const db=event.target.result
  // 创建存储对象
  db.createObjectStore('user',{keyPath:'id'})
})

2.设置操作模式，获取store对象

/* 设置操作模式
    参数一：设置存储对象操作模式，可字符串或数组
    参数二：操作模式
*/
const transaction=db.transaction(['user'],'readwrite')
const store=transaction.objectStore('user')

3.新增操作

let user={name:'rv',age:20}
const request=store.add(user)
/* 监听当前操作 */
// 方式一
transaction.oncomplete(()=>{
  console.log('本次事务完成')
})
// 方式二
request.onsuccess(()=>{
  console.log('新增完成')
})

4.查询操作

// 查询方式一：通过keyPath主键查询
const request1=store.get(100)
request1.onsuccess(event=>{
  console.log(event.target.result)
})
// 查询方式二：游标查询
const request2=store.openCursor()
request2.onsuccess(event=>{
  const cursor=event.target.result
  if(cursor){
    console.log(cursor.key,cursor.value)
    // 继续游标遍历
    cursor.continue()
  }else{
    console.log('查询完成')
  }
})

5.更新操作

更新操作依赖于游标查询操作

const request=store.openCursor()
request.onsuccess(event=>{
  const cursor=event.target.result
  if(cursor.key==='age'){
    let value=cursor.value
    value-=10
    // 更新操作
    cursor.update(value)
  }
})

6.删除操作

删除操作依赖于游标查询操作

const request=store.openCursor()
request.onsuccess(event=>{
  const cursor=event.target.result
  if(cursor.key==='name'){
    // 删除操作
    cursor.delete()
  }
})

Cookie

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

内存cookie与硬盘cookie

Cookie总是存储在客户端中，按照存储位置可分为内存cookie和硬盘cookie

分辨内存cookie与硬盘cookie

没有设置过期时间时，默认情况下cookie为内存cookie

当设置了过期时间且时间不为0或负数时则为硬盘cookie

内存cookie由浏览器维护，当浏览器关闭时会清空，存在时间短暂
硬盘cookie保存在硬盘中，有一个过期时间，由用户手动清理或到过期时间自动清理

常见属性

过期时间属性
- expires 设置指定时间为过期时间
- max-age 设置时长为过期时间
Domain cookie作用域
- 如果不设置，默认是origin，不包含子域名
- 如果指定Domain，则包含子域名
Path 指定主机下哪些域名可以接受cookie
- 如果设置路径，则只有该路径及其子路径才携带cookie

JavaScript高级

21.JSON-WebStorage-IndexedDB-Cookie