js怎么存成json

JavaScript 中如何将数据存为 JSON 格式？

在现代 Web 开发中，JSON（JavaScript Object Notation）已经成为数据交换的事实标准，它轻量、易于人阅读和编写，也易于机器解析和生成，在 JavaScript 中，我们经常需要将复杂的数据结构（如对象、数组）转换为 JSON 格式的字符串，以便于存储到本地、发送到服务器或进行其他操作。

本文将详细讲解在 JavaScript 中如何将数据存成 JSON 格式，核心是使用两个关键的内置方法：JSON.stringify() 和 JSON.parse()。

核心方法：`JSON.stringify()`

要将 JavaScript 的值（通常是对象或数组）转换为 JSON 字符串，我们使用的核心方法是 JSON.stringify()。

基本用法

JSON.stringify() 方法接收一个 JavaScript 对象或数组作为参数，并返回一个对应的 JSON 格式字符串。

// 1. 定义一个 JavaScript 对象
const user = {
  id: 101,
  name: "张三",
  age: 30,
  isStudent: false,
  courses: ["JavaScript", "React"],
  address: {
    city: "北京",
    street: "中关村大街1号"
  }
};
// 2. 使用 JSON.stringify() 将对象转换为 JSON 字符串
const jsonString = JSON.stringify(user);
// 3. 输出结果
console.log(jsonString);
// 输出:
// {"id":101,"name":"张三","age":30,"isStudent":false,"courses":["JavaScript","React"],"address":{"city":"北京","street":"中关村大街1号"}}
// 注意：输出是一个字符串，而不是对象
console.log(typeof jsonString); // "string"

格式化输出（美化 JSON）

默认情况下,JSON.stringify() 输出的字符串是压缩过的，没有多余的空格和换行，为了便于调试和阅读，我们可以传入第二个参数：一个用于格式化的数字或一个替换函数（replacer）。

传入数字：表示缩进用的空格数，通常使用 2 或 4。

const prettyJsonString = JSON.stringify(user, null, 2);
console.log(prettyJsonString);
// 输出:
// {
//   "id": 101,
//   "name": "张三",
//   "age": 30,
//   "isStudent": false,
//   "courses": [
//     "JavaScript",
//     "React"
//   ],
//   "address": {
//     "city": "北京",
//     "street": "中关村大街1号"
//   }
// }

传入替换函数 (replacer)：可以更精细地控制哪些属性应该被包含在最终的 JSON 字符串中。

// 只保留 name 和 age 属性
const filteredJsonString = JSON.stringify(user, (key, value) => {
  if (key === 'id' || key === 'isStudent' || key === 'courses' || key === 'address') {
    return undefined; // 忽略这些属性
  }
  return value; // 保留其他属性
}, 2);
console.log(filteredJsonString);
// 输出:
// {
//   "name": "张三",
//   "age": 30
// }

处理特殊数据类型

JSON.stringify() 在转换时有一些特殊规则：

函数：会被忽略。
undefined：会被忽略。
Symbol：会被忽略。
循环引用：会直接抛出 TypeError 错误。

const data = {
  name: "测试",
  log: function() { console.log("hello"); }, // 函数会被忽略
  value: undefined // undefined 会被忽略
};
data.self = data; // 循环引用
// console.log(JSON.stringify(data)); // 报错: TypeError: Cyclical object value

实际应用场景：将 JSON 存储起来

将数据转换为 JSON 字符串后，我们通常需要将其“存起来”，最常见的两种方式是存储在浏览器的本地或会话中。

存储到 localStorage 或 sessionStorage

localStorage 和 sessionStorage 只能存储字符串类型的数据，在存储对象或数组之前，必须先用 JSON.stringify() 将其转换为字符串；读取时，必须用 JSON.parse() 将字符串转换回 JavaScript 对象。

const myData = {
  theme: 'dark',
  notifications: true,
  lastLogin: new Date().toISOString()
};
// --- 存储数据 ---
// 1. 将对象转换为 JSON 字符串
const dataToStore = JSON.stringify(myData);
console.log("准备存储的字符串:", dataToStore);
// 2. 存储到 localStorage
localStorage.setItem('userSettings', dataToStore);
// --- 读取数据 ---
// 1. 从 localStorage 获取字符串
const storedDataString = localStorage.getItem('userSettings');
console.log("从 localStorage 获取的字符串:", storedDataString);
// 2. 将字符串转换回 JavaScript 对象
const retrievedData = JSON.parse(storedDataString);
console.log("解析后的对象:", retrievedData);
console.log("主题是:", retrievedData.theme); // 可以正常访问属性
// 验证类型
console.log(typeof retrievedData); // "object"

发送到服务器

在前后端交互中,我们通常使用 fetch API 或 XMLHttpRequest 将数据发送到服务器，发送请求体时，也需要将 JavaScript 对象序列化为 JSON 字符串。

// 使用 fetch API 发送 POST 请求
const postData = {
  username: 'john_doe',
  password: '123456'
};
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 告诉服务器我们发送的是 JSON
  },
  // 将 JavaScript 对象转换为 JSON 字符串作为请求体
  body: JSON.stringify(postData) 
})
.then(response => response.json())
.then(data => {
  console.log('服务器响应:', data);
})
.catch(error => {
  console.error('请求失败:', error);
});

反向操作：`JSON.parse()`

既然提到了存储和读取,就必须介绍 JSON.parse() 的作用，它是 JSON.stringify() 的逆操作，用于将一个 JSON 格式的字符串解析成 JavaScript 值（对象或数组）。

const jsonStr = '{"name":"李四","age":25,"hobbies":["reading","coding"]}';
// 使用 JSON.parse() 将字符串解析为对象
const jsObj = JSON.parse(jsonStr);
console.log(jsObj);
// 输出: { name: '李四', age: 25, hobbies: [ 'reading', 'coding' ] }
console.log(jsObj.name); // "李四"
console.log(jsObj.hobbies[0]); // "reading"
console.log(typeof jsObj); // "object"

在 JavaScript 中将数据存为 JSON 格式，主要遵循以下步骤：

序列化（存成 JSON）：
- 使用 JSON.stringify() 将 JavaScript 对象/数组转换为 JSON 字符串。
- 在需要存储到 localStorage 或发送到服务器时，这一步是必需的。
反序列化（读取 JSON）：
- 使用 JSON.parse() 将 JSON 字符串转换回 JavaScript 对象/数组。
- 在从 localStorage 或服务器响应中读取数据后，这一步是必需的，以便你能像操作普通 JavaScript 对象一样操作数据。