JSON使用

一、初识 JSON

1. JSON 是什么

• JSON 全称是 JavaScript Object Notation。

• JSON 是 Ajax 发送和接收数据的一种格式。

2. 为什么需要 JSON

• JSON 有 3 种形式，每种形式的写法都和 JS 中的数据类型很像，可以很轻松的和 JS 中的数据类型互相转换。

• JS->JSON->PHP/Java。

• PHP/Java->JSON->JS。

• 前后端数据传输的数据过渡器。

二、JSON 的 3 种形式

1. 简单值形式

• JSON 的简单值形式就对应着 JS 中的基础数据类型：数字、字符串、布尔值、null。
• 数字

• 字符串

• 布尔值

• null

• 注意事项：
  • JSON 中没有 undefined 值。
  • JSON 中的字符串必须使用双引号。
  • JSON 中是不能注释的。

2. 对象形式

• JSON 的对象形式就对应着 JS 中的对象。

• 注意事项：
  • JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号。
  • JSON 中只要涉及到字符串，就必须使用双引号
  • 不支持 undefined。

3. 数组形式

• JSON 的数组形式就对应着 JS 中的数组。

• 注意事项：
  • 数组中的字符串必须用双引号。
  • JSON 中只要涉及到字符串，就必须使用双引号
  • 不支持 undefined。

三、JSON 的常用方法

1. JSON.parse()

• JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值。
• 一定要是合法的 JSON 字符串，否则会报错。

2. JSON.stringify()

• JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串。

3. 使用 JSON.parse() 和 JSON.stringify() 封装 localStorage 

• storage.js

const storage = window.localStorage;

// 设置
const set = (key, value) => {
    storage.setItem(key, JSON.stringify(value));
};

// 获取
const get = (key) => {
    JSON.parse(storage.getItem(key));
};

// 删除
const remove = (key) => {
    storage.removeItem(key);
};

// 清空
const clear = () => {
    storage.clear();
};

export {set, get, remove, clear};

• 测试 set() 和 get()

• 测试 remove() 

• 测试 clear()