JS——JSON对象与webStorage

目录

问题1：什么是JSON？

问题2：经常听到JSON对象，那么JSON对象和JS中的对象有什么区别呢？

问题3：JSON形式——对象和数组

问题4：JSON序列化和反序列化

---

问题1：什么是JSON？

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。 同时也易于机器解析和生成。 JSON 采用完全独立于语言的文本格式， 而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等），这样就使得 JSON 成为理想的数据交换格式。

// json
{
	"name": "jsx",
	"age": 22,
	"fruits": ["apple", "pear", "grape"]
}

JSON 是一种轻量级的数据交换格式（轻量级指的是跟 xml 做比较）。数据交换指的是客户端和服务器之间业务数据的传递格式。JSON体积小，易解析，相对应的XML体积大，难解析，但是语法严谨（通常银行中的相关系统会使用XML进行数据交换）。

// xml
<root>
	<name>jsx</name>
	<age>22</age>
	<fruits>apple</fruits>
	<fruits>pear</fruits>
	<fruits>grape</fruits>
</root>

问题2：经常听到JSON对象，那么JSON对象和JS中的对象有什么区别呢？

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，JSON 本质是一个字符串。

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和NULL。它基于 JavaScript 语法，但与之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript。

JSON语:Json中的key-value必须用双引号引用。

• 数据由逗号分隔，最后一个不加逗号
• 大括号保存对象
• 方括号保存数组

js对象key-value有时候可以不加单双引号（Json必须加双引号） 

总结如下表： 

问题3：JSON形式——对象和数组

对象形式：

{ "name":"runoob", "alexa":10000, "site":null }

 可以使用点号 . 或 [] 来访问对象的值

let json = {"name": "jsx", "age": 22}
console.log(json['name'], json.age) // jsx 22

可以循环，嵌套，修改，删除 JSON对象属性 

// 可循环
for (let key in json) {
	console.log(json[key]); // jsx 22
}

// 可修改
json.name = "ljj";
console.log(json); // {name: 'ljj', age: 22}

// 可删除
delete json.age;
console.log(json); // {name: 'ljj'}

// 可嵌套
let json1 = {
	"name": "runoob",
	"alexa": 10000,
	"sites": {
		"site1": "www.runoob.com",
		"site2": "m.runoob.com",
		"site3": "c.runoob.com"
	}
}

数组形式：

let arrJson1 = {
	"name": "网站",
	"num": 3,
	"sites": [{
			"name1": [["jsx", "ljj", "ddc"]]
		},
		{
			"name2": [["jsx", "ljj", "ddc"]]
		},
		{
			"name3": [["jsx", "ljj", "ddc"]]
		}
	]
}

问题4：JSON序列化和反序列化

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3
// ""

 

// 创建一个示例数据
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem('session', JSON.stringify(session));

// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));

// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

详细内容参考文档：JSON、

webStorage API：

• sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
• localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

这两种机制是通过 Window.sessionStorage 和 Window.localStorage 属性使用（更确切的说，在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStorage 和 sessionStorage 属性下）

 具体使用方法：webStorage API