JSON数据存储和浏览器数据存储

2022-05-23  本文已影响0人  咸鱼不咸_123

一、JSON

1.JSON的由来

2.JSON的基本语法

3.JSON序列化

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

3.1 序列化JSON.stringify的细节

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细节

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 实现深拷贝

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

image-20220522232723625.png

1.1 localStorage和sessionStorage有什么区别

1.2 Storage常见的方法和属性

适用于localStorage和sessionStorage

Storage具有如下的属性和方法

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

key是一个个数值型，value是一个个对象

2.1 IndexedDB的连接数据库

// * 打开数据库，和数据库建立连接
// * 有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
上一篇 下一篇

猜你喜欢

热点阅读