js怎么给json存数据

JavaScript如何给JSON数据存储与管理：从基础到实践

在Web开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，而被广泛应用，而JavaScript作为前端开发的核心语言，与JSON有着天然的紧密联系，JavaScript究竟该如何给JSON存数据呢？本文将围绕这一问题，从JSON的本质、JavaScript操作JSON的方法、数据持久化以及注意事项等方面进行详细阐述。

理解JSON与JavaScript对象的关系

需要明确一个概念：JSON是一种数据格式，而JavaScript中的对象（Object）是一种数据类型，JSON的语法源于JavaScript对象字面量语法,但它有自己的规范，

JSON的键名必须使用双引号（）括起来，而JavaScript对象可以使用单引号、双引号或不使用引号（如果标识符符合规则）。
JSON的值只能是：字符串（双引号）、数字、布尔值、null、数组、对象（符合JSON格式的），JavaScript对象的值还可以是函数、Date对象、undefined等。

当我们说“给JSON存数据”时，通常指的是操作符合JSON格式的JavaScript对象,或者将数据转换为JSON字符串进行存储和传输。

在JavaScript中操作JSON数据（内存层面）

在JavaScript程序的运行过程中，数据通常存储在内存中，我们可以直接操作JavaScript对象,这些对象可以很容易地转换为JSON格式。

创建和初始化JSON数据（JavaScript对象）

最直接的方式就是创建一个JavaScript对象,其结构符合JSON格式。

// 创建一个符合JSON格式的JavaScript对象
let userInfo = {
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  }
};
// userInfo就是一个可以视为JSON数据的JavaScript对象

给JSON数据（JavaScript对象）添加/修改数据

我们可以通过点符号（）或方括号（[]）来访问、添加或修改对象的属性。

// 添加新属性
userInfo["email"] = "zhangsan@example.com"; // 使用方括号
userInfo.phone = "13800138000"; // 使用点符号
// 修改已有属性
userInfo.age = 31;
userInfo.address.city = "上海";
console.log(userInfo);
/*
输出：
{
  name: '张三',
  age: 31,
  isStudent: false,
  courses: [ '数学', '英语' ],
  address: { city: '上海', district: '海淀区' },
  email: 'zhangsan@example.com',
  phone: '13800138000'
}
*/

删除JSON数据（JavaScript对象）中的数据

使用delete操作符可以删除对象中的属性。

delete userInfo.isStudent;
console.log(userInfo);
// 输出中将不再有 isStudent 属性

从JSON字符串解析为JavaScript对象

当我们从服务器接收到或从本地存储中读取到的是JSON格式的字符串时，需要使用JSON.parse()方法将其转换为JavaScript对象才能进行操作。

let jsonString = '{"name":"李四","age":25,"hobbies":["reading","traveling"]}';
let parsedObj = JSON.parse(jsonString);
// 现在可以像操作普通JS对象一样操作parsedObj
parsedObj.age = 26;
parsedObj.hobbies.push("coding");
console.log(parsedObj); // { name: '李四', age: 26, hobbies: [ 'reading', 'traveling', 'coding' ] }

将JavaScript对象转换为JSON字符串

当我们需要将JavaScript对象存储到本地存储，或者发送给服务器时，通常需要使用JSON.stringify()方法将其转换为JSON字符串。

let originalObj = {
  "product": "手机",
  "price": 4999,
  "inStock": true
};
let jsonStringified = JSON.stringify(originalObj);
console.log(jsonStringified); // '{"product":"手机","price":4999,"inStock":true}'
console.log(typeof jsonStringified); // string

JSON.stringify()还支持第二个参数（replacer）和第三个参数（space）,用于过滤和格式化输出。

// 过滤属性
let replacer = (key, value) => {
  if (key === "price") {
    return undefined; // 过滤掉price属性
  }
  return value;
};
let filteredStr = JSON.stringify(originalObj, replacer);
console.log(filteredStr); // '{"product":"手机","inStock":true}'
// 格式化输出
let formattedStr = JSON.stringify(originalObj, null, 2); // 缩进2个空格
console.log(formattedStr);
/*
{
  "product": "手机",
  "price": 4999,
  "inStock": true
}
*/

JavaScript给JSON数据持久化存储

除了在内存中操作，我们常常需要将JSON数据持久化保存，以便在页面刷新或关闭后再次使用,浏览器提供了几种本地存储方案。

使用`localStorage`

localStorage提供了一种在浏览器中持久存储数据的方式，数据没有过期时间，除非主动清除，它只能存储字符串类型的数据，因此JSON对象需要通过JSON.stringify()转换为字符串后存储，读取时再通过JSON.parse()转换回来。

let myData = {
  "username": "admin",
  "lastLogin": new Date().toISOString()
};
// 存储：对象 -> JSON字符串
localStorage.setItem('userConfig', JSON.stringify(myData));
// 读取：JSON字符串 -> 对象
let storedDataStr = localStorage.getItem('userConfig');
let storedDataObj = JSON.parse(storedDataStr);
console.log(storedDataObj); // { username: 'admin', lastLogin: '...' }
console.log(storedDataObj.username); // admin
// 更新数据（先读取，修改，再存储）
storedDataObj.loginCount = (storedDataObj.loginCount || 0) + 1;
localStorage.setItem('userConfig', JSON.stringify(storedDataObj));
// 删除数据
// localStorage.removeItem('userConfig'); // 删除特定键
// localStorage.clear(); // 清除所有数据

特点：

存储容量较大（通常为5MB或更多）。
仅在客户端存储,不会随HTTP请求发送到服务器。
同源策略下，不同页面可以共享同一localStorage。

使用`sessionStorage`

sessionStorage与localStorage类似，但它的生命周期仅限于当前会话（浏览器标签页关闭时数据会被清除）。

// 存储和读取方式与localStorage完全相同
sessionStorage.setItem('tempData', JSON.stringify({temp: 'value'}));
let tempData = JSON.parse(sessionStorage.getItem('tempData'));

特点：

数据在页面会话结束时（关闭标签页或浏览器）被清除。
存储容量和localStorage类似。
同一窗口（或标签页）的不同页面间共享数据。

注意事项

循环引用：如果JavaScript对象中存在循环引用（对象的一个属性指向对象本身），JSON.stringify()会抛出错误。
```
let obj = {};
obj.self = obj;
// JSON.stringify(obj); // TypeError: Converting circular structure to JSON
```

函数和undefined：JSON.stringify()会忽略对象中的函数和undefined值。

let objWithFunc = {name: "test", func: function(){}, undef: undefined};
console.log(JSON.stringify(objWithFunc)); // {"name":"test"}

数据安全：存储在localStorage或sessionStorage中的数据对JavaScript代码是可见的，不要存储敏感信息（如密码、token等）,重要数据应考虑加密或在服务器端存储。
浏览器兼容性：localStorage和sessionStorage是HTML5标准，所有现代浏览器都支持,但在非常老的浏览器中可能需要polyfill。
存储大小限制：虽然localStorage和sessionStorage的容量比cookies大，但仍有限制,避免存储过大的数据。

JavaScript给JSON存数据，核心在于理解JSON与JavaScript对象的区别与联系，并熟练运用JSON.parse()和JSON.stringify()进行转换，在内存层面，可以直接操作JavaScript对象；在持久化存储层面，则可以利用localStorage或sessionStorage，将JSON对象转换为字符串进行保存，读取时再转换回来，在实际开发中，还需注意循环引用、数据安全、浏览器兼容性等问题，这些技能,将能更高效地处理前端数据存储与管理任务。

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播足球直播

正文