json和string的转换（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();//重新加载