面试题种类
概念类、区别类
概念类： 请简单说说事件委托原理
（1）是什么 （2）应用 （3）原理
区别类： localStorage与sessionStorage区别
01-前端基础-webpai
1.1-事件委托面试点
-
1.什么是事件委托
- 给父元素注册事件，委托给子元素处理
-
2.事件委托原理：==事件冒泡==
-
3.事件委托注意点
- this : 指向父元素
- e.target : 指向触发事件的子元素
-
4.事件委托场景 ：
给动态新增元素注册委托事件
1.2-localStorage与sessionStorage区别
-
1.相同点
作用一致 ： 用于存储数据- 都是只能存储字符串类型数据(上限5MB)
-
2.不同点： 存储方式不同
localStorage : 硬盘存储（永久存储，页面关闭还在，存在硬盘）sessionStorage ：内存存储（临时存储，页面关闭了就消失）
-
3.localStorage与sessionStorage如何存储引用类型数据（数组和对象）
- 转json存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="btn1">存对象</button>
<button class="btn2">取对象</button>
<script>
/*
json -> js : let jsObj = JSON.parse( json格式 )
js -> json : let jsonStr = JSON.stringify( js对象 )
*/
let obj = {
name:'ikun',
age:30,
sex:'男'
}
document.querySelector('.btn1').onclick = function(){
//存 ： (1)js -> json (2)存json
// //(1)js->json
// let jsonStr = JSON.stringify( obj )
// //(2)存json
// localStorage.setItem('user',jsonStr)
//合写一行
localStorage.setItem('user',JSON.stringify( obj ))
}
document.querySelector('.btn2').onclick = function(){
//取: (1)取json (2)json->js
// //(1)取json
// let jsonStr = localStorage.getItem('user')
// //(2)json->js
// let jsObj = JSON.parse( jsonStr )
//
//合写一行
let jsObj = JSON.parse( localStorage.getItem('user') )
console.log( jsObj )
}
</script>
</body>
</html>
