json数据和字符串json数据相互转换

1.json数据和字符串json数据相互转换

JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。在项目开发中，使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。因为 JSON 的语法是基于 js 的，因此很容易将 JSON 和 js 中的对象弄混，但是应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。

• JSON.Stringify(要转换的数据):将json数据转换成字符串json数据
• JSON.parse(要转换的数据)：将字符串json数据转成真正的json数据

<script>
        var obj = {
            "name":"张三",
            "age":20
        }
        /* 
            JSON.Stringify(要转换的数据):将json数据转换成字符串json数据
            JSON.parse(要转换的数据)：将字符串json数据转成真正的json数据
        */
       var res = JSON.stringify(obj);
       console.log(res);//"{"name":"张三","age":20}"
       var res1 = JSON.parse(res);
       console.log(res1);//{"name":"张三","age":20}
    </script>

2.本地存储(localStorage、sessionStorage)

• 存储方法有3种：cookie localStorage sessionStorage

• cookie：多用于服务器存储

• localStorage和sessionStorage都是本地存储 存储到浏览器端

• localStorage:长期存储，除非手动删除，否者会一直存在

  • 设置存储信息：localStorage.setItem(key,data)
  • 获取存储信息：localStorage.getItem(key)
  • 删除单个存储信息 localStorage.removeItem(key);
  • 清除所有缓存信息 localStorage.clear()

• sessionStorage：会话存储，当前窗口(会话)关闭 数据就会清除

  • 语法和localStorage的用法一致，只需要将localStorage缓存SessionStorage即可

注意：存储数据是键值对的形式存储 存储的格式都是字符串

 //存储
        localStorage.setItem("name","张三");
        localStorage.setItem("age",20);
        localStorage.setItem("isLogin",true)
        var obj = {
            "name":"李四",
            "age":18
        }
        // 如果是json数据存储  需要先用JSON.stringify转换成字符串形式
        localStorage.setItem("obj1",JSON.stringify( obj ) )


        // 获取
        console.log(  localStorage.getItem("age")   );//"20"  string类型
        console.log(  localStorage.getItem("isLogin") )// "true"

        var res = localStorage.getItem("obj1")
        console.log(  JSON.parse(res) ); //{"name":"李四","age":18}


        // 删除
        localStorage.removeItem("user");
        // 手动清空
        localStorage.clear();

3.audio的属性、事件、方法

3.1属性

• src 设置获取音频资源路径
• controls 是否显示标签 true/false
• muted 是否静音 true/false
• loop 是否循环播放 true/false
• autoplay 音频是否自动播放 true/false 不是所有的浏览器都有效果
• currentSrc 只读属性 获取音频资源地址
• currentTime 获取当前播放时长
• volume 获取设置音频的音量 范围[0,1]
• pasued 音频是否停止播放 true暂停 false播放
• ended 音频是否结束播放 true结束 false没有结束
• playbackRate 获取设置音频速度

// 1.属性
        // src 设置获取音频资源路径
        audio.src = "./source/hanmai.mp3";
        // controls 是否显示标签  true/false
        audio.controls = true;
        // muted  是否静音   true/false
        audio.muted = false;
        // loop  是否循环播放   true/false
        audio.loop = false;
        // autoplay  音频是否自动播放  true/false  不是所有的都有效果
        audio.autoplay = true;
        btn[0].onclick = function () {
            // currentSrc 只读属性  获取音频资源地址
            console.log(audio.currentSrc);
            // currentTime  获取当前播放时长
            console.log(audio.currentTime);
            // duration  获取音频的总时长
            console.log(audio.duration)
            // volume  获取设置音频的音量  范围[0,1]
            console.log(audio.volume)
            // pasued  音频是否停止播放  true暂停  false播放
            console.log(audio.paused)
            // ended    音频是否结束播放  true结束  false没有结束
            console.log(audio.ended);
            // playbackRate  获取设置音频速度
            console.log(audio.playbackRate)
            audio.playbackRate = 3;
        }

3.2事件

• oncanplay 开始准备播放音频的时候触发
• onpause 点击播放暂停按钮触发
• onended 音频颁发给结束触发
• ontimeupdate 播放时间更新触发

 // 2.事件  有自己的触发场景
        // oncanplay  开始准备播放音频的时候
        audio.oncanplay = function () {
            console.log("开始准备");
        }
        // onpause   点击播放按钮
        audio.onpause = function () {
            console.log("播放")
        }
        // onended   结束
        audio.onended = function () {
            console.log("结束")
        }
        // ontimeupdate   时间更新
        audio.ontimeupdate = function () {
            console.log("正在播放音频")
        }

3.3方法

• audio.play();//播放
• audio.pause();//暂停
• audio.load();//重新加载

    // 3.方法   主动触发某个功能
        btn[1].onclick = function () {
            // console.log(123);
            audio.play();//播放
            audio.pause();//暂停
            audio.load();//重新加载
        }

4.video的属性、事件、方法

4.1属性

• src 设置获取视频资源路径
• poster 设置视频封面
• width/height 设置视频宽高
• controls 是否显示标签 true/false
• muted 是否静音 true/false
• loop 是否循环播放 true/false
• autoplay 视频是否自动播放 true/false 不是所有的浏览器都有效果
• currentSrc 只读属性 获取视频资源地址
• currentTime 获取当前播放时长
• volume 获取设置视频的音量 范围[0,1]
• pasued 视频是否停止播放 true暂停 false播放
• ended 视频是否结束播放 true结束 false没有结束
• playbackRate 获取设置视频速度

4.2事件

• oncanplay 开始准备播放音频的时候触发
• onpause 点击播放暂停按钮触发
• onended 音频颁发给结束触发
• ontimeupdate 播放时间更新触发

4.3方法

• video.play();//播放
• video.pause();//暂停
• video.load();//重新加载