一、初识 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()