一、JSON
1.JSON的由来
在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。
-
JSON的全称是 JavaScript Object Notation(JavaScript对象符号)：
- JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是JavaScript的一个子集。
- 但是虽然JSON被提出来的时候是主要应用JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用。
- 很多编程语言都实现了将JSON转成对应模型的方式。
-
其他的传输格式：
- XML：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输等各方面都弱于JSON，所以目前已经很少在被使用了。
- Protobuf：另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所以目前在前端使用的较少。
-
目前JSON被使用的应用场景也越来越多
- 网络数据的传输JSON数据。
- 项目的某些配置文件。
- 小程序的 app.json文件
- 非关系型数据库(NoSQL)将json作为存储格式。
2.JSON的基本语法
JSON文件的后缀名是.json
-
JSON的顶层支持三种类型的值：
- 简单值：数字(Number)、字符串(String，不支持单引号)、布尔类型（Boolean）、null类型
- 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值
- 数组值：数组的值可以是简单值、对象值、数组值。
JSON不能有注释
JSON不能有多余的逗号
3.JSON序列化
- 某些情况下我们希望将JavaScript中复杂类型转化成JSON格式的字符串，这样方便对其进行处理。
- 比如我们希望将一个对象保存到localStorage中
- 但是如果我们直接存放一个对象，这个对象会被转化成 [object Object]格式的字符串，并不是我们想要的结果。
const obj={
name:"wjy",
age:18,
friends:{
name:"hyz"
},
hobbies:["篮球","足球"]
}
// 将对象数据存储在localStorage中
// * 因为localStorage的第二个参数也是需要传字符串类型，所以会先将对象类型转化为string类型
localStorage.setItem("obj",obj);
// * 取出存储的值
console.log(localStorage.getItem("obj"));//[object Object]
在浏览器中的 显示 [object Object]
image-20220522203839374.png
- 通过JSON.stringify()将对象转化为JSON字符串。
- 通过JSON.parse()将JSON字符串解析为一个对象
3.1 序列化JSON.stringify的细节
-
可以传入第二个参数
- 可以是数组
- 在数组可以指定哪些属性需要进行转换
- 也可以是一个回调函数
- 会回调每个key-value
- 可以是数组
-
也可以传入第三个参数
- 是对字符串进行美化
- 可以传入数字或字符串
- 数字n：会在key使用n个空格
- 字符串：会在key前面添加传入的字符串
const obj={
name:"wjy",
age:18,
friends:{
name:"hyz"
},
hobbies:["篮球","足球"],
}
// * 需求：将上面的对象转成JSON字符串
// * 1. 直接转化
const jsonString1=JSON.stringify(obj)
console.log(jsonString1); // {"name":"wjy","age":18,"friends":{"name":"hyz"},"hobbies":["篮球","足球"]}
// * 2.stringify第二个参数replacer
// * 2.1 传入数组：设定哪些是需要转换的。
const jsonString2=JSON.stringify(obj,["name","friends"])
console.log(jsonString2);// {"name":"wjy","friends":{"name":"hyz"}}
// * 2.2 传入一个回调函数：会遍历每个key value
// 年龄虚岁要加1
const jsonString3=JSON.stringify(obj,(key,value)=>{
if(key=="age") return value+1;
return value;
})
console.log(jsonString3);//{"name":"wjy","age":19,"friends":{"name":"hyz"},"hobbies":["篮球","足球"]}
// *3 stringify有第三个参数 space:可以是数字或者字符串
const jsonString4=JSON.stringify(obj,null,2)
console.log(jsonString4);
// {
// "name": "wjy",
// "age": 18,
// "friends": {
// "name": "hyz"
// },
// "hobbies": [
// "篮球",
// "足球"
// ]
// }
// * 4.如果转换的对象有toJSON这个函数，会直接使用这个函数的返回值
// const jsonString5=JSON.stringify(obj);
// console.log(jsonString5);
3.2 序列化JSON.parse细节
- 它可以传入第二个参数
- 一个回调函数，可以进行对key-value进行拦截
const JSONString='{"name":"wjy","age":19,"friends":{"name":"hyz"},"hobbies":["篮球","足球"]}';
// * 第二个参数可以对值进行拦截
const info=JSON.parse(JSONString,(key,value)=>{
if(key=="age") return value-1;
return value
});
console.log(info);
3.3 实现深拷贝
- 赋值：引用的是同一片空间
- 浅拷贝：只是拷贝第一层属性的值
- 深拷贝：两个对象之间完全没有关系，JSON.stringify和JSON.parse实现深拷贝存在一些缺陷
const obj={
name:"wjy",
age:18,
friends:{
name:"hyz"
},
hobbies:["篮球","足球"],
foo(){
console.log("foo函数");
}
}
// * 将obj对象的内容放到info变量中
// * 1. 引用赋值
const info=obj
// * 浅拷贝：只是将里面的属性拷贝了一份，
/**
* * Object.assign()
*/
const info2={...obj};
console.log(info2==obj); //false
info2.age=100;
console.log("obj的age:",obj.age);
info2.hobbies[0]="吃零食";
console.log("obj的hobbies:",obj.hobbies);
// * 深拷贝 ：让两个对象完全没有关系
// * 使用JSON.stringify和JSON.parse,但是对函数是无能为力的
const info3=JSON.parse(JSON.stringify(obj))
info3.friends.name="tqy";
console.log(obj.friends.name);
console.log(info3);
二、浏览器的存储方案
1.认识Storage
- WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：
- localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留。
- sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除。
image-20220522232723625.png
1.1 localStorage和sessionStorage有什么区别
- 我们会发现localStorage和sessionStorage看起来非常的相似。
- 那么它们有什么区别呢？
- 验证一：关闭网页后重新打开，localStorage会保留,sessionStorage不会保留
- 验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留
- 验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会保留。
1.2 Storage常见的方法和属性
适用于localStorage和sessionStorage
Storage具有如下的属性和方法
-
属性
- Storage.length:只读属性
- 返回一个整数，表示存储在Storage对象中的数据项数量。
- Storage.length:只读属性
-
方法
Storage.key()：该方法接受一个数值n作为参数，返回存储中第n个key名称。
Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value。
-
Storage.setItem()：该方法接受一个key和value，并且将会key和value添加到存储中。
- 如果key存储，则更新对应的值。
Storage.removeItem()：该方法接受一个key作为参数，并把该key对应的value从存储中删除。
Storage.clear()：该方法的作用是清空存储中的所有key。
1.3 封装Storage
class JYCache{
constructor(isLocal=true){
this.storage=isLocal?localStorage:sessionStorage;
}
setItem(key,value){
if(value){
this.storage.setItem(key,JSON.stringify(value))
}
}
getItem(key){
let value=this.storage.getItem(key);
if(value){
value=JSON.parse(value);
}
return value;
}
key(index){
return this.storage.key(index);
}
removeItem(key){
this.storage.removeItem(key);
}
length(){
return this.storage.length;
}
}
const localCache=new JYCache();
const sessionCache=new JYCache(false);
export {
localCache,
sessionCache
}
2. IndexedDB
-
什么是IndexDB呢？
- 我们能看到DB这个词，就说明它其实是一种数据库(Database)，通常情况下在服务器端比较常见。
- 在实际的开发中，大量的数据都是存储在数据库的，客户端主要是请求这些数据并且展示。
- 有时候我们可能会存储一些简单的数据到本地（浏览器中），比如token、用户名、密码、用户信息等，比较少存储大量的数据。
- 那么如果确实有大量的数据需要存储，这个时候可以选择使用IndexDB
-
IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据。
- 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）
- 事务是对数据库进行操作的时候一个操作单元
- IndexDB本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可。
- 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）
key是一个个数值型，value是一个个对象
2.1 IndexedDB的连接数据库
- 第一步：打开indexedDB的某一个数据库。
- 通过indexedDB.open(数据库名称，数据库版本)方法。
- 如果数据库不存在，那么会创建这个数据库。
- 如果数据库已经存在，那么会打开这个数据库。
// * 打开数据库，和数据库建立连接
// * 有wjy数据库就打开，没有就会创建。
const dbRequest=indexedDB.open("wjy",2)
let db=null;
// * 数据库连接失败
dbRequest.onerror=function(err){
console.log("数据库连接失败");
}
dbRequest.onsuccess=function(event){
db=event.target.result;
// console.log("数据库连接成功");
}
// * 第一次打开 或者版本发生更新
dbRequest.onupgradeneeded=function(event){
const db=event.target.result;
// * 创建一些存储对象
// * keyPath：设置表的主键 ，例如users的主键是id
db.createObjectStore("users",{keyPath:"id"})
}
class User{
constructor(id,name,age){
this.id=id;
this.name=name;
this.age=age;
}
}
const users=[
new User(100,"wjy",20),
new User(101,"hyz",20),
new User(102,"tqy",20),
]
// 获取btns ，监听点击
const btns=document.querySelectorAll("button")
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
console.log("db:",db);
// * 创建一个事务
const transaction=db.transaction(["users"],"readwrite")
console.log("transaction:",transaction);
// * 获取一个具体的store对象
const store=transaction.objectStore("users");
switch(i){
case 0:
console.log("点击了新增");
for(const user of users){
const request=store.add(user);
request.onsuccess=function(){
console.log(`${user.name}插入成功`);
}
}
transaction.oncomplete=function(){
console.log("添加操作全部完成");
}
break;
case 1:
// * 查询方式一：store.get() （知道主键，根据主键查询）
// console.log("点击了查询");
// const request=store.get(100);
// request.onsuccess=function(event){
// console.log(event.target.result);
// }
// * 查询方式二
const request=store.openCursor()
request.onsuccess=function(event){
const cursor=event.target.result;
if(cursor){
if(cursor.key==101)
{
console.log(cursor.key,cursor.value);
}else cursor.continue()
}else{
console.log("查询完成");
}
}
break;
case 2:
const request2=store.openCursor()
request2.onsuccess=function(event){
const cursor=event.target.result;
if(cursor){
if(cursor.key==101)
{
cursor.delete()
}else cursor.continue()
}else{
console.log("查询完成");
}
}
console.log("点击了删除");
break;
case 3:
const deleteRequest=store.openCursor()
deleteRequest.onsuccess=function(event){
const cursor=event.target.result;
if(cursor){
if(cursor.key==101)
{
const value=cursor.value;
value.name="curry"
cursor.update(value)
console.log(cursor.key,cursor.value);
}else cursor.continue()
}else{
console.log("查询完成");
}
}
console.log("点击了修改");
break;
}
}
}
三、总结
JSON的数据存储和浏览器的数据存储.png
