一、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数据。
- 项目的某些配置文件。
非关系型数据库(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的细节
可以传入第二个参数
也可以传入第三个参数
是对字符串进行美化
- 可以传入数字或字符串
数字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.key()：该方法接受一个数值n作为参数，返回存储中第n个key名称。
Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value。
Storage.setItem()：该方法接受一个key和value，并且将会key和value添加到存储中。
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本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可。
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.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
|
窥视卡
雷达卡
发表于 2022-5-24 10:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡