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

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();//重新加载