JSON语法，JSON序列化(stringify,parse)，localStorage，sessionStorage，indexedDB(增删改查)，Cookie

1. 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作为存储格式

2. JSON基本语法

JSON的顶层支持三种类型的值
简单值：数字(Number)、字符串(String，不支持单引号)、布尔类型(Boolean)、null类型
1
123
对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值
1
2
3
4
{
"name":"why",
"age": 18
}

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

[
    123,
    "abc",
    {
        "name":"why",
        "age":18
    }
]

3. JSON序列化-对象存储存在问题

将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理
比如将一个对象保存到localStorage中
但是如果直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是想要的结果

const obj = {
    name: "why",
    age: 18
}

localStorage.setItem("obj",obj);

4. JSON序列化方法

在ES5中引用了JSON全局对象，该对象有两个常用的方法
- stringify方法：将JavaScript类型转成对应的JSON字符串
- parse方法：解析JSON字符串，转回对应的JavaScript类型

那么上面的代码通过如下的方法来使用

const obj = {
    name: "why",
    age: 18
}

// localStorage.setItem("obj",obj);

// 存储
// 转换为字符串
let str = JSON.stringify(obj);
localStorage.setItem("obj",str);

// 获取
str = localStorage.getItem("obj");
// 转换为对象
const getObj = JSON.parse(str);
console.log(getObj);

4.1. Stringify的参数replacer

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
- 如果指定了一个 replacer 函数，则可以选择性地替换值
- 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性

const obj = {
  name: "why",
  age: 18
};

// 1. 直接转化成jSON字符串
let str = JSON.stringify(obj);
// {"name":"why","age":18}
// console.log(str);

// 2.stringify第二个参数replacer
// 传入数组：设定需要的转换
str = JSON.stringify(obj, ["name"]);
// {"name":"why"}
// console.log(str);

// 3.传入回调函数
str = JSON.stringify(obj, (key, value) => {
    /**
    { name: 'why', age: 18 }
    name why
    age 18
    */
    console.log(key,value);
    if (key === "name") {
        return "test";
    } else {
        return value;
    }
});
// {"name":"test","age":18}
console.log(str);

4.2. Stringify的参数space

它还可以跟上第三个参数space，规定字符串输出时的缩进

为数字时，表示缩进空格
为字符串时，表示缩进字符串形式

const obj = {
  name: "why",
  age: 18
};

str = JSON.stringify(obj,null,2);
/**
{
  "name": "why",
  "age": 18
}
*/
console.log(str);

str = JSON.stringify(obj,null,"--");
/**
{
--"name": "why",
--"age": 18
}
*/
console.log(str);

如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果

const obj = {
  name: "why",
  age: 18,
  toJSON: () => {
    return "Hello World";
  }
};

str = JSON.stringify(obj, null, 2);
// Hello World
console.log(str);

4.3. parse方法

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)

const obj = {
  name: "why",
  age: 18
};

// 直接转化成jSON字符串
let str = JSON.stringify(obj);

// 转为对象
const getObj = JSON.parse(str, (key, value) => {
  if (key === "age") {
    return value + 1;
  }
  return value;
});

// { name: 'why', age: 19 }
console.log(getObj);

4.4. 对象的拷贝

对象相互赋值分别包括

引入的赋值：指向同一个对象，相互之间会影响
对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响
对象的深拷贝：两个对象不再有任何关系，不会相互影响

4.4.1. 引用赋值

生成的新对象和之前的对象指向的是同一个对象

const obj = {
    name: "why",
    friends: {
        name: "john"
    },
    foo: function(){
        console.log("foo function");
    }
};

// 1. 引用赋值：两者指向同一个对象
let info = obj;
// true
console.log(info === obj);

obj.name = "name";
// name
console.log(info.name);

obj.friends.name="test";
// test
console.log(info.friends.name);

4.4.2. 浅拷贝

生成的新对象和之前的对象并不是同一个对象
但是对象内部中对象的指向仍是指向同一个对象
- obj的friends对象和info的friends对象指向同一个对象

const obj = {
    name: "why",
    friends: {
      name: "john"
    },
    foo: function(){
      console.log("foo function");
    }
};


// 2. 浅拷贝：生成一个新对象，但是friends对象仍指向同一个对象
info = { ...obj };
// false
console.log(info === obj);

obj.name = "name";
// why
console.log(info.name);

obj.friends.name="test";
// test
console.log(info.friends.name);

4.4.3. 使用JSON序列化深拷贝

生成的新对象和之前的对象并不是同一个对象
- 相当于是进行了一次深拷贝
这种方法它对函数是无能为力的
- 创建出来的info中是没有foo函数的，这是因为stringify并不会对函数进行处理

const obj = {
  name: "why",
  friends: {
    name: "john"
  },
  foo: function(){
    console.log("foo function");
  }
};

// 3. 深拷贝：stringify和parse实现
const str = JSON.stringify(obj);
info = JSON.parse(str);

// { name: 'why', friends: { name: 'john' } }
console.log(info);

// false
console.log(info === obj);

obj.friends.name = "amy";
// john
console.log(info.friends.name);

// stringify并不会对函数进行处理
// TypeError: info.foo is not a function
info.foo();

4.4.4. 自定义深拷贝函数

实现深拷贝
- JSON.parse
  - 这种深拷贝的方式其实对于函数、Symbol等是无法处理的
  - 并且如果存在对象的循环引用，也会报错
自定义深拷贝函数
1. 自定义深拷贝的基本功能
2. 对Symbol的key进行处理
3. 其他数据类型的值进程处理：数组、函数、Symbol、Set、Map
4. 对循环引用的处理

obj对象

const s1 = Symbol();
const s2 = Symbol("bbb");

const obj = {
  name: "why",
  age: 18,
  [s1]: "abc",
  s2: s2,
  friends: {
    name: "john",
    address: {
      city: "USA"
    }
  },
  hobbies: ["a", "b", "c"],
  foo: function (m, n) {
    console.log("foo function", m, n);
  },
  set: new Set(["a", "b", "c"]),
  map: new Map([
    ["a", "AAA"],
    ["b", "BBB"]
  ])
};
// 循环引用
obj.info = obj;

深拷贝实现

function isObject(value) {
  const type = typeof value;
  // console.log(value instanceof Set);
  if (value !== null && type === "object") {
    return true;
  } else {
    return false;
  }
}

function deepClone(originValue, map = new WeakMap()) {
  // 判断传入的是否是Symbol类型
  if (typeof originValue === "symbol") {
    return Symbol(originValue.description);
  }
  // 判断传入的是否是函数类型
  if (typeof originValue === "function") {
    return originValue;
  }

  // 判断传入的是否是set集合类型
  if (originValue instanceof Set) {
    return new Set([...originValue]);
  }

  // 判断传入的是否是map集合类型
  if (originValue instanceof Map) {
    return new Map([...originValue]);
  }

  // 判断传入的是否是一个对象类型
  if (!isObject(originValue)) {
    return originValue;
  }
  //循环引用问题
  if (map.has(originValue)) {
    return map.get(originValue);
  }

  // 判断传入的对象是数组，还是对象
  const newObj = Array.isArray(originValue) ? [] : {};
  map.set(originValue, newObj);
  // 复制 key，value
  for (const key in originValue) {
    newObj[key] = deepClone(originValue[key], map);
  }
  // 对Symbol的key进行特殊处理
  const symbolKeys = Object.getOwnPropertySymbols(originValue);
  for (const key of symbolKeys) {
    // const newKey = Symbol(key.description);
    newObj[key] = deepClone(originValue[key], map);
  }
  return newObj;
}

const newObj = deepClone(obj);

newObj.friends.address.city = "UK";
// console.log(obj.s2);
// console.log(newObj.s2 === obj.s2);
console.log(newObj);
console.log(obj);

5. 认识Storage

数据存储在用户浏览器中
设置，读取方便，甚至页面刷新不丢失数据
容量较大，sessionStorage约5M，localStorage约30M
只能存储字符串，可以将对象JSON.stringify()编码后存储
localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留，同一个浏览器下数据共享，以键值对形式存储
sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除，同一个窗口下数据共享，以键值对形式存储

5.1. localStorage和sessionStorage的区别

关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除
在页面内实现跳转，localStorage会保留，sessionStorage也会保留
在页面外实现跳转(打开新的网页)，localStorage会保留，sessionStorage不会被保留

5.2. Storage常见的方法和属性

5.2.1. 属性

Storage.length：只读属性
- 返回一个整数，表示存储在Storage对象中的数据项数量

5.2.2. 方法

Storage.key(n)：该方法接受一个数值n作为参数，返回存储中的第n个key名称
Storage.getItem(key)：该方法接受一个key作为参数，并且返回key对应的value
Storage.setItem(key, value)：该方法接受一个key和value，并且将会把key和value添加到存储中
- 如果key存储，则更新其对应的值
Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除
Storage.clear()：该方法的作用是清空存储中的所有key

5.3. 封装Storage

在开发中，为了对Storage使用更加方便，可以对其进行一些封装

class MyCache {
  constructor(isLocal) {
    this.storage = isLocal ? localStorage : sessionStorage;
  }

  setItem(key, 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 MyCache(true);
const sessionCache = new MyCache(false);

export { localCache, sessionCache };

6. IndexedDB

6.1. 认识IndexedDB

什么是IndexedDB呢?
- 看到DB这个词，就说明它其实是一种数据库(Database)，通常情况下在服务器端比较常见
- 在实际的开发中，大量的数据都是存储在数据库的，客户端主要是请求这些数据并且展示
- 有时候可能会存储一些简单的数据到本地(浏览器中)，比如token、用户名、密码、用户信息等，比较少存储大量的数据
- 那么如果确实有大量的数据需要存储，可以选择IndexedDB
IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据
- 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL(非关系型数据库)
- IndexDB本身就是基于事务的，只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可

6.2. 数据库操作

6.2.1. 连接数据库

第一步：打开indexDB的某一个数据库
通过 indexDB.open(数据库名称, 数据库版本) 方法
如果数据库不存在，那么会创建这个数据
如果数据库已经存在，那么会打开这个数据库

1 2	// 打开数据库 const dbRequest = indexedDB.open("why");

6.2.2. 监听回调

第二步：通过监听回调得到数据库连接结果
数据库的open方法会得到一个 IDBOpenDBRequest 类型
可以通过下面的三个回调来确定结果
- onerror：当数据库连接失败时
- onsuccess：当数据库连接成功时回调
  - 可以通过 IDBOpenDBRequest 的 result属性获取到db对象：dbRequest.result
- onupgradeneeded：当第一次打开数据库，或者数据库的version发生变化并且高于之前版本时回调
  - 通常会创建具体的存储对象
  - const db = event.target.result
  - db.createObjectStore(存储对象名称, { keypath: 存储的主键 })

// 数据库对象
let db = null;

// 回调函数
dbRequest.onerror = function (err) {
  console.log("数据库连接错误", err);
};

dbRequest.onsuccess = function (event) {
  console.log("数据库连接成功");

  db = dbRequest.result;
};

// 第一次/版本发生更新
dbRequest.onupgradeneeded = function (event) {
  console.log("数据库发生改变");
  console.log(event);

  db = event.target.result;
  // 创建存储对象
  // (存储对象名称, { keypath: 存储的主键 })
  db.createObjectStore("users", { keyPath: "id" });
};

6.2.3. 事务对象

IndexedDB 规定，在对新数据库做任何事情之前，需要开始一个事务，事务中需要指定该事务跨越哪些存储对象 ( objectStore )
对于事务，一个简单的理解就是，一个事务里的操作，要么全部执行成功，要么全部执行失败
IndexedDB 提供了 IDBDatabase.transaction() 方法用于开启是一个事务，并且返回一个 IDBTransaction 对象
该方法的原型是 IDBDatabase.transaction(storeName, [mode])
- storeName：必填，用于指定事务中需要操作到的存储对象，如果只有一个存储对象，可以直接写存储对象名，如果有多个存储对象，那么需要把它们封装成一个列表
- mode：可选，用于指定事务的类型，可选的值有：readonly ( 只读，默认值 ) 或者 readwrite（读写）
获取IDBTransaction 对象步骤
- 第一步：通过 IDBDatabase 获取对应存储的事务
- 第二步：通过事务获取对应的存储对象 transaction.objectStore(存储名称)

// 1.通过db获取对应存储的事务
// db.transaction(存储名称, 可写操作)
const transaction = db.transaction("users", "readwrite");
// 2. 通过事务获取对应的存储对象
// transaction.objectStore(存储名称)
const store = transaction.objectStore("users");

6.2.4. 新增数据

store.add()

class User {
  constructor(id, name, age) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}
const users = [
  new User("001", "aaa", 18),
  new User("002", "bbb", 19),
  new User("003", "ccc", 20)
];

// 增
function addData(transaction, store) {
  for (const user of users) {
    const request = store.add(user);
    request.onsuccess = function (event) {
      console.log(`${user.id} 添加成功`);
    };
  }
  transaction.oncomplete = function (event) {
    console.log("添加完成", event);
  };
}

6.2.5. 查找数据

单个
- store.get(key)
多个
- 通过 store.openCursor 拿到游标对象
- 在request.onsuccess中获取cursor：event.target.result
- 获取对应的key：cursor.key
- 获取对应的value：cursor.value
- 可以通过cursor.continue()来继续执行

// 单个查询
function singleSearch(store, key) {
  const request = store.get(key);
  request.onsuccess = function (event) {
    console.log(event.target.result);
  };
}
// 所有查询
function searchAll(store) {
  const request = store.openCursor();
  request.onsuccess = function (event) {
    const cursor = event.target.result;
    if (cursor) {
      console.log(cursor.key, cursor.value);
      cursor.continue();
    } else {
      console.log("数据查询完毕");
    }
  };
}

6.2.6. 删除数据

cursor.delete()

// 删
function deleteData(store, key) {
  // 通过 store.openCursor 拿到游标对象
  const deleteRequest = store.openCursor();
  deleteRequest.onsuccess = function (event) {
    const cursor = event.target.result;
    if (cursor) {
      if (cursor.key === key) {
        // 删除
        console.log(`删除 ${key}`);
        cursor.delete();
      } else {
        cursor.continue();
      }
    }
    console.log("剩余所有数据");
    searchAll(store);
  };
}

6.2.7. 修改数据

cursor.update(value)

// 改
function updateData(store, key) {
  const updateRequest = store.openCursor();
  updateRequest.onsuccess = function (event) {
    const cursor = event.target.result;
    if (cursor) {
      if (cursor.key === key) {
        const value = cursor.value;
        value.age = 18;
        // 更新
        console.log(`更新 ${key}`);
        cursor.update(value);
      } else {
        cursor.continue();
      }
    }
    console.log("更新后的数据");
    singleSearch(store, key);
  };
}

7.1. 认识cookie

Cooki(复数形态Cookies)，又称为“小甜饼”。类型为小型文本文，某些网站为了辨别用户身份而存储在用户本地终端(Client Side)上的数据
- 浏览器会在特定的情况下携带上cookie来发送请求，可以通过cookie来获取一些信息

Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie
- 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的
- 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理
如果判断一个cookie是内存cookie还是硬盘cookie呢?
- 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除
- 有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除

7.2. cookie代码测试

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

const app = new Koa();

const testRouter = new Router();

testRouter.get("/test", (ctx, next) => {
  ctx.cookies.set("name", "why", {
    maxAge: 60,
    // HttpOnly的存在主要是为了防止用户通过前端来盗用cookie而产生的风险
    httpOnly: false
  });

  ctx.body = "test";
});

testRouter.get("/demo", (ctx, next) => {
  const value = ctx.cookies.get("name");
  ctx.body = `cookie is ${value}`;
});

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

app.listen(8080, () => {
  console.log("服务器启动");
});

/test 设置cookie

/demo 获取cookie

7.3. cookie常见的属性

cookie的生命周期
- 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除
- 通过设置expires或者max-age来设置过期的时间
  - expires：设置的是Date.toUTCString()，设置格式是：expires=date-in-GMTString-format
  - max-age：设置过期的秒钟，max-age=max-age-in-seconds (例如一年为60*60*24*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

7.4. 客户端设置cookie

js直接设置和获取cookie
1
document.cookie
不设置cookie过期时间就是内存cookie，会在会话关闭时被删除掉
1
2
document.cookie = "name=hello"
document.cookie = "age=18"
设置cookie，同时设置过期时间(默认单位是秒钟)
1
document.cookie = "name=why;max-age=10"
设置cookie过期
1
document.cookie = "name=why;max-age=0"

W.T.的博客

JavaScript学习笔记16-JSON-数据存储

1. JSON的由来

2. JSON基本语法

3. JSON序列化-对象存储存在问题

4. JSON序列化方法

4.1. Stringify的参数replacer

4.2. Stringify的参数space

4.3. parse方法

4.4. 对象的拷贝

4.4.1. 引用赋值

4.4.2. 浅拷贝

4.4.3. 使用JSON序列化深拷贝

4.4.4. 自定义深拷贝函数

5. 认识Storage

5.1. localStorage和sessionStorage的区别

5.2. Storage常见的方法和属性

5.2.1. 属性

5.2.2. 方法

5.3. 封装Storage

6. IndexedDB

6.1. 认识IndexedDB

6.2. 数据库操作

6.2.1. 连接数据库

6.2.2. 监听回调

6.2.3. 事务对象

6.2.4. 新增数据

6.2.5. 查找数据

6.2.6. 删除数据

6.2.7. 修改数据

7.1. 认识cookie

7.2. cookie代码测试

7.3. cookie常见的属性

7.4. 客户端设置cookie

1. JSON的由来

2. JSON基本语法

3. JSON序列化-对象存储存在问题

4. JSON序列化方法

4.1. Stringify的参数replacer

4.2. Stringify的参数space

4.3. parse方法

4.4. 对象的拷贝

4.4.1. 引用赋值

4.4.2. 浅拷贝

4.4.3. 使用JSON序列化深拷贝

4.4.4. 自定义深拷贝函数

5. 认识Storage

5.1. localStorage和sessionStorage的区别

5.2. Storage常见的方法和属性

5.2.1. 属性

5.2.2. 方法

5.3. 封装Storage

6. IndexedDB

6.1. 认识IndexedDB

6.2. 数据库操作

6.2.1. 连接数据库

6.2.2. 监听回调

6.2.3. 事务对象

6.2.4. 新增数据

6.2.5. 查找数据

6.2.6. 删除数据

6.2.7. 修改数据

7. cookie

7.1. 认识cookie

7.2. cookie代码测试

7.3. cookie常见的属性

7.4. 客户端设置cookie