一、json对象
（1） 认识json对象
JSON对象：存储复杂数据的字面量对象
① 基本语法：
// 使用大括号包裹的一段 key:value的键值对数据
// 键：属性名称
// 值：属性的数据
// 描述一个动物：使用json对象描述一个事物
var tom = {name: "汤姆", nickname: "tom", age: 65, gender: "公"}
② 查询数据
// 直接查看json对象
console.log(tom)
// 查看某个属性：查看对象的姓名
// 对象.属性名称
console.log(tom.name)
③ 修改数据
// 根据 对象.属性 = 新数据 完成指定属性的修改
tom.gender = "male"
console.log(tom)
// {name: "汤姆", nickname: "tom", age: 65, gender: "male"}
（2） json对象类型转换
json对象的类型转换，只要是和字符串之间的转换操作，js语法中提供了两个函数：
-
JSON.parse(json格式字符串)：将一个满足格式的字符串，转换成json对象 -
JSON.stringify(json对象)：将一个json对象转换成字符串类型数据 - 注意：
JSON(全部大写)的函数是固定操作语法
// 创建json对象
var tom = {name: "汤姆", age: 65}
// json对象，可以直接访问属性，使用方便【特点】
console.log(tom.name) // 汤姆
// json对象 转换成 json格式的字符串类型数据
// 字符串数据：方便存储和渲染展示【特点】
var tom2 = JSON.stringify(tom)
// json.stringify(tom) // 错误，语法错误(SyntaxError)
console.log(tom2, typeof(tom2)) // '{name: "汤姆", age: 65}' string
console.log(tom2.name) // undefined，字符串没有name属性
// 字符串数据 转换成 json对象
// 在使用数据时，需要将json字符串数据转换成json对象直接使用
var tom3 = JSON.parse(tom2) // {name: "汤姆", age: 65}
console.log(tom3.name) // 汤姆
二、try-catch
（1） 基本语法
运行时错误：异常Exception，表示代码执行过程中不正常的执行问题
try-catch：异常捕获语句，专门处理代码运行过程中出现的问题
try {
// 尝试执行可能出现错误的代码
// ...
} catch(e) {
// 一旦上面的代码执行出现问题，就执行catch中的代码进行友好提示
// 但是保障出现了错误不影响程序的运行，程序可以继续向下执行
}
三、代码调试
（1） 认识调试工具
JavaScript代码的调试工具，使用浏览器自带的控制台【源代码】
image.png
（2） 代码调试方式
可以在源代码中的行号上，使用鼠标进行点击标记（标记 点：断点）
-
断点：程序代码运行过程中，暂停到断点位置，由开发人员控制代码逐行执行
image.png
程序执行的控制台：开发人员控制代码逐行执行的过程
- 编号①：表示恢复代码执行，直接让代码执行到下一个断点或者执行完成
- 编号②：表示代码逐行执行，但是遇到函数直接获取函数返回值，不进入函数内容
- 编号③：表示代码逐行执行，但是遇到函数时进入函数内部逐行执行
- 编号④：表示代码在函数中正在逐行执行，直接跳出函数到函数调用的地方
image.png
（3） 代码的执行调试
① 不带函数的执行过程
var num1 = 12
var num2 = 23
var total = num1 * num2
console.log('total',total)
第11行标记断点，刷新网页：
image.png
image.png
② 带函数的执行过程
// 2、附带函数
function mul(n1, n2) {
var s = n1 * n2
return s
}
var num1 = 12
var num2 = 55
var total = mul(num1, num2)
console.log(total, 'total')
a. 不需要查看函数内部代码的执行过程
image.png
image.png
image.png
b. 需要查看函数内部代码的执行过程
image.png
image.png
image.png
image.png
image.png
关于控制按钮的注意事项：
- 按钮1：如果不想继续逐行执行代码，点击之后代码就会立刻执行完毕
- 按钮2和按钮3：
- 如果执行的这行代码，没有包含调用函数的代码；功能一样都是下一步
- 如果执行的这行代码包含函数调用，按钮2直接得到函数返回值；按钮3会进入函数内部逐行执行函数内部代码
image.png
四、本地存储
（1）cookie
① 什么是cookie
cookie是网站应用开发中，服务器给浏览器客户端记录文本数据的一个对象；记录数据的时候有如下特点：
- 数据格式：
key=value，保存的数据只能是文本数据 - 有过期时间：
expires=xxxx- 不设置过期时间，称为临时
cookie，会话结束数据删除 - 设置过期时间，称为永久
cookie，过期时间一到立即删除
- 不设置过期时间，称为临时
- 可以包含路径，给不同的路径保存不同的
cookie - 一个网站，大部分浏览器限制最多保存50个
key=value键值对 - 一个网站，大部分浏览器限制最多保存
4K数据
② 如何添加cookie
JavaScript语法中，可以按照如下的固定语法添加cookie数据
// 添加临时cookie
document.cookie = "key=value"
// 添加永久cookie
// 设置过期时间1天
var date = new Date()
date.setTime(date.getTime() + 1*24*60*60*1000)
document.cookie = "key=value;expires=" + date.toGMTString()
浏览器中不能直接打开网页，而是通过live server插件启动临时服务器打开网页
image.png
image.png
image.png
③ 如何读取
cookieJavaScript中读取cookie数据的固定语法
// document.cookie
console.log(document.cookie, "cookie数据")
// admin_lang=schinese; client_lang=schinese; age=20; name=damu cookie数据
// 读取指定名称的cookie
var _ck = document.cookie.split(";")
_ck.forEach(item => {
if(item.trim().startsWith("name=")) {
// 获取到了name对应的cookie数据
console.log(item) // name=damu
}
})
④ 如何替换cookie
JavaScript语法中，替换原有的cookie，只需要给同名属性赋值即可
// 如果cookie中没有这个数据-新增，如果已经包含name=数据，就修改/覆盖
⑤ 如何删除cookie
JavaScript中删除cookie，给要删除的cookie设置一个已过期的时间即可！
var date = new Date()
date.setTime(date.getTime() - 1*24*60*60*1000)
// 删除cookie的时候，指定好前面的属性名称即可；后面的属性值写不写无所谓
document.cookie = "name=;expires=" + date.toGMTString()
（2） sessionStorage
基于会话级别的本地存储方案：用户打开浏览器访问网站时建立会话，此时可以通过sessionStorage存储数据、编辑数据、查询数据和删除数据；直到浏览器完全关闭会话结束时sessionStorage存储的数据全部自动删除；经常用于记录一些会话数据，如用户是否登录的状态，可以记录到sessionStorage
浏览器的控制台中可以查看当前网页在sessionStorage中存储的数据
image.png
代码操作：一个用户的模拟登录
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="show">尊敬的游客，欢迎访问本系统</p>
<input type="text" name="username" id="username">
<button>点击登录</button>
<a href="./demo01错误处理.html">跳转到其他页面</a>
<script>
function $(selector) {
return document.querySelector(selector)
}
var _username = $("#username")
var _btn = $("button")
window.onload = function() {
// 获取用户的登录数据
var _name = sessionStorage.getItem("login")
if(_name) {
$("#show").innerText = "尊敬的用户" + _name + "; 欢迎访问本系统"
} else {
$("#show").innerText = "尊敬的游客，欢迎访问本系统"
}
}
// 点击登录
_btn.onclick = function() {
// 本地存储中记录数据
sessionStorage.setItem("login", _username.value)
}
</script>
</body>
</html>
（3） localStorage
localStorage可以永久存储指定的数据，操作函数和sessionStorage操作函数一致，都包含设置数据、获取数据和删除数据
-
setItem(name, value)：设置数据，set 设置，item 单项/单个/个体 -
getItem(name)：获取数据，get获取 -
removeItem(name)：删除数据，remove删除，移除
除非用户主动清除浏览器缓存数据，否则存储的数据会一直存在，一般用于记录用户访问数据，如视频播放进度...
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
视频播放进度：
<input type="range" name="range" id="range" min="1" max="100">
<script>
function $(selector){
return document.querySelector(selector)
}
// 获取视频播放进度
var _range = $("#range")
// 加载网页的时候，设置用户进度
window.onload = function() {
// 获取记录的进度
var _process = localStorage.getItem("process")
if(_process) {
_range.value = _process
}
}
// 记录实时进度
_range.onchange = function() {
// 获取当前进度
var _process = _range.value
console.log(_process)
// 记录进度
localStorage.setItem("process", _process)
}
</script>
</body>
</html>
