09-JSON，数据存储，异常

1. 什么是JSON

JSON: JavaScript Object Notation JS对象描述符

• 格式一：

"hello json"

• 格式二：

{
    "name": "wc",
    "age:": 19,
    "friend": {
        "name": "xq"
    },
    "hobbies":["zq","lq"]
}

• 格式三：

[
    "abc",123,{"name:":"wc"}  
]

JSON的语法要求：

1. 支持的数据类型：数字，字符串，布尔值，null值，不能写函数
2. 对象的key必须使用双引号包起来
3. JSON中没有注释
4. 通过一些网站可以验证自己的JSON是否OK

现在你需要对JSON的认识：

1. JSON是服务器响应给客户端的数据格式 也可以把JSON数据给服务器 所以说 JSON是客户端与服务器之间通信的一种数据格式。是目前最最常用的数据格式。
2. JSON并不是JS对象，和JS对象的区别，你需要记住。

2. JSON的序列化和反序列化

问： 能不能把一个JS对象，存储到硬盘上？
答： 可以存储

<script>
    // 当程序运行起来，对象是存储在内存中的
    // 程序运行结束或断电，内存上的数据就没了
    let obj = {name:"wc"}
    console.log(obj);

    // 能不能把obj对象也存储到硬盘（local storage）
    window.localStorage.setItem("obj",obj)

    // 你尝试把一个JS对象存储到local storage中，由于local storage中只能存储字符串，那么obj会调用toString方法，尝试转成字符串
</script>

• 此时我们需要把obj对象转成JSON串之后，再存储，这个过程，叫序列化。如下：

<script>
    let obj = {name:"wc"}
    let objstr = JSON.stringify(obj); // 转成了JSON串
    console.log(objstr); // {"name":"wc"}  
    console.log(typeof objstr); // string JSON字符串
    window.localStorage.setItem("obj",objstr)
</script>

-反序列化：把JSON串还原成JS对象，代码如下：

<script>
    let str = window.localStorage.getItem("obj")
    console.log(str);
    console.log(typeof str);
    let obj = JSON.parse(str);
    console.log(obj.name);
</script>

• 利用JSON可以实现深copy，如下：

<script>
    let obj = {name:"wc"}
    // let newObj = obj; // 浅copy

    let objstr =  JSON.stringify(obj)
    let newObj = JSON.parse(objstr);

    obj.name = "wc666";
    console.log(newObj.name);
</script>

3. 数据存储之LocalStorage

数据可以存储在两个地方：

• 内存
• 硬盘

**持久化数据：**就是把数据保存在硬盘。我们开发主要面对的是浏览器，浏览器中是否有一块区域可以持久化存储数据呢？

• 答：有的，Local Storage，Session Storage，Cookies

LocalStorage是永久化数据存储方案，数据存储完毕，关闭浏览器，明天，后天....再打开浏览器，数据还是存在的。

对应的一个一些API，如下：

• length 返回数据的数量
• setItem(key,value) 存储数据的 如果key一样，数据会发生覆盖
• getItem(key) 获取数据
• removeItem(key) 删除数据
• Clear() 清除local storage中的所有的数据

<script>
    // 存储数据
    // window.localStorage.setItem("name","wc")
    // window.localStorage.setItem("age",18)

    // 获取数据
    // console.log(localStorage.getItem("name"));

    // 删除数据
    // localStorage.removeItem("age")

    // 清除数据
    localStorage.clear();
</script>

4. 数据存储之SessionStorage

• Session是会话的意思，打电话从开始到结束就可以称为一次会话，浏览器一个网站，从开始浏览到关闭浏览器，这个也可以称为一次会话。

• Setssion Storage中也可以存储数据，它的数据的有效性是在一次会话，当会话结束，数据会自动被销毁，或你跳到一个新的网页，sessionStorage中的数据也会被销毁。

• 对应的API，和localStorage中的API是一样的。

---

<script>
    sessionStorage.setItem("name:","xq");
    sessionStorage.setItem("age",18)
</script>

• 请你封装一个工具类，这个类，可以对localStorage和sessionStorage进行操作，如下：

// Cache是缓存的意思
// Cache还需要区域是永久性存储还是会话级存储
class Cache {
    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;
        }
    }
    removeItem(key){
        this.storage.removeItem(key)
    }
    clear(){
        this.storage.clear();
    }
    length(){
        return this.storage.length;
    }
}
// 如果不传参或传一个true 表示永久存储
let localCache = new Cache();

// 如果传入false，表示会话级存储
let sessionCache = new Cache(false);

使用之，如下：

<script>
    // 由于上面的代码段中定义了localCache和sessionCache
    // 在下面的代码段中就可以使用localCache和sessionCache
    localCache.setItem("address","bj")
    console.log(localCache.getItem("address"));
</script>

5. JS中的常见错误

语法错误

• 这类错误最好解决。只要有语法错误，所有代码都不会执行。

<script>
    var a = 1;
    function fn{}
</script>

引用错误

• 错误之前的代码还会执行
• 错误之后的代码不会执行
• 通常情况下，我们使用了一个没有声明的数据，就会报这样的错误

<script>
    console.log(1);
    console.log(2);
    console.log(a);
    var a = 3;
    console.log(b);
    console.log(4);
    console.log(5);
</script>

范围错误

<script>
    // let arr = new Array(2); // 表示定义一个数组，里面可以放2个数据
    let arr = new Array(-2); 
    console.log(arr);
</script>

6. 自己抛出错误和捕获错误

由于JS是弱类型语言，我们可以给函数传递各种各样的数据，如果内部没有进行校验，会给项目带来很多隐藏bug，这也就是现在TS为什么这火，因为TS中有很多类型校验。我们自己在JS中进行校验，如果参数不合法，怎么办？

解决：

1. return “你的参数不合法” 不好 一般不会使用return去提示调用者
2. 使用throw语句

• 代码如下：

<script>
    function sum(num1,num2){
        if(typeof num1 !== "number" || typeof num2 !== "number"){
            // return "你的参数不合适，请传入数字"
            // 和return一样，你是把错误扔到调用处
            throw "你的参数不合适，请传入数字"
        }
        return num1+num2;
    }
    // 错误后面的代码不会执行了
    console.log(sum(10,null));
    console.log("我是后面的代码");
</script>

• 在JS中，错误也有一个类，叫Error，也应对了很多了类，如RangeError，SyntaxError，TypeError..... 我们就可以new 一个错误对象抛出去，如下：

<script>
    function sum(num1,num2){
        if(typeof num1 !== "number" || typeof num2 !== "number"){
            throw new Error("你的参数不合适，请传入数字")
            // throw "你的参数不合适，请传入数字"
        }
        return num1+num2;
    }
    // 错误后面的代码不会执行了
    console.log(sum(10,null));

    console.log("我是后面的代码");
</script>

• 通常上面的演示，发现，如果代码出错了，下面的代码就不会执行了，如何解决这个错误，让下面的代码还要执行，要去try catch这个错误，代码如下：

<script>
    function sum(num1,num2){
        if(typeof num1 !== "number" || typeof num2 !== "number"){
            throw new Error("你的参数不合适，请传入数字")
        }
        return num1+num2;
    }
    try{
        // try中放可能出错的代码
        sum(10,null)
    }catch(err){
        // catch中就可以捕获，程序员或JS引擎抛出的错误
        console.log(err);
    }
    console.log("我是后面的代码");
</script>