22.5.31学习笔记---网页数据储存方案&&同源策略及跨域解决方案

---

一、防抖和节流及区别

1.防抖（debounce）

简介：多次触发高频事件，n秒内函数只会执行一次（取最后一次），如果n秒内高频事件被再次触发，则重新计时。防抖的主要作用是固定函数不要让其变化过快
举例：就像进行百度关键词搜索时，每次输入相应文字都会有联想词提示。短时间内你不断删改其中关键字，它不会是你每修改一次就变化一次而是取你的最后一次输入结果，结束输入一小段时间后才会触发提示
代码实现：

let timer = null;
function debounce (){
	if(timer){
		clearTimeout(timer);
	}
	timer = setTimeout(function(){
		console.log("防抖实现")
	} , 3000)
}

2.节流（throttle）

简介：多次触发高频事件，但在n秒内函数只会执行一次（可以理解为取的第一次）。节流的主要作用是人为来降低函数的执行效率
举例：就像你抢购某件商品时，你不断刷新购买。但小段时间内你的点击只有一次有效，节流就是让你小段时间内的过多点击次数变成无效的
代码实现：

let lastDate = new Date().getTime();
function throttle(){
	const curDate = new Date().getTime();
	if(curDate - lastDate >= 3000){
		console.log("节流触发");
		lastDate = new Date().getTime();
	}
}

3.区别

防抖是将多次执行转化为最后一次执行，
节流是把多次执行变成每隔一段时间执行
如果短时间没有高频触发二者和普通函数执行并无区别

二、H5储存方案

储存网页数据方案

• Cookie
• hash
• SessionStorage
• LocalStorage

（前两者已学习不做过多说明）

1.区别比较

方案	生命周期	容量限制	网络请求	应用场景举例
Cookie	默认关闭浏览器后失效, 但可以设置过期时间	大小4KB左右,个数20~50个	每次都会携带在HTTP头中 ，如果使用cookie保存过多数据会带来性能问题	判断用户是否登录
SessionStorage	仅在当前窗口下有效，关闭窗口或浏览器后被清除, 不能设置过期时间	大小5M左右	仅在浏览器中保存，不参与和服务器的通信	购物车
LocalStorage	除非被清除，否则永久保存	同SessionStorage	同SessionStorage	表单数据

说明
1.具体容量大小可参考链接: link
2.无论通过以上那种方式存储数据, 切记不能将敏感数据直接存储到本地

2.使用方法—增删改查

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

三、同源策略（Same origin policy）

1.相关介绍

同源策略是一种约定，它是浏览器最核心也是最基本的安全功能
所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域

说明

http://www.baidu.com:80/index.html

在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据
但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的,这时如果再通过Ajax请求数据就会拿不到跨域数据

2.跨域解决方案—jsonp

实现原理：通过多个script标签的src属性来请求跨域数据

标准格式

如下（注意一般服务器返回的不是一个变量，而是一个函数）

<script>
    let oScript = document.createElement("script");
    oScript.src = "http://127.0.0.1/jsTest/20-jsonp.php？cb=test";//通过cb可以传递函数名称
    document.body.appendChild(oScript);//动态生成script标签从而异步加载保证function定义在调用之前
    function test(data) {
        console.log(data);
    }
</script>

<?php
$cb = $_GET['cb']; // test
echo $cb."(666);"; // test(666)
?>

jQuery自带ajax方法

 $.ajax({
        url: "http://127.0.0.1/jsTtest/22-jsonp.php",
        data:{
            "teacher": "xxx",
            "age": 18
        },
        dataType: "jsonp", // 告诉jQuery需要请求跨域的数据(原callback=jQuery112406520384710124194_1559732574283)
        jsonp: "cb",  // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取---cb
        jsonpCallback: "xxx", // 告诉jQuery服务器在获取回调函数名称的时候回调函数的名称是什么---xxx
        success: function (msg) {
            console.log(msg);
        },
        error:function(){
            console.log('fail');
        }
        
    });

<?php
// 0.拿到传递过来的数据
$teacher = $_GET["teacher"];
$age = $_GET["age"];
$arr = array("name"=>$teacher, "age"=>$age);
$data = json_encode($arr);//改成json格式
// 1.拿到回调函数的名称
//$cb = $_GET["callback"]; // jQuery112406520384710124194_1559732574283
$cb = $_GET["cb"]; // xxx
// 2.返回数据
//echo $cb."(666);"; // jQuery112406520384710124194_1559732574283(666);
echo $cb."(".$data.");"; // jQuery112406520384710124194_1559732574283(666);
?>

http://127.0.0.1/jsTtest/22-jsonp.php?cb=xxx&teacher=xxx&age=18&_=1654008189102
末尾的随机因子是为了防止缓存

跨域运用比如百度输入框通过跨域获取联想词

四、JS执行本质原理

1.JS是单线程的

所有JS中的代码都是串行的

javaScript的单线程，与它的用途有关：
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操DOM，
这决定了它只能是单线程，否则会带来很复杂的同步问题
如果JS是多线程的，现在有一个线程要修改元素中的内容, 一个线程要删除该元素, 这时浏览器应会无法判断

2.同步代码和异步代码

除了"事件绑定的函数"和"回调函数"以外的都是同步代码
执行原理：

1. 程序运行会从上至下依次执行所有的同步代码
2. 在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
3. 当所有同步代码都执行完毕后, JS会不断检测事件循环中的异步代码是否满足条件
4. 一旦满足条件就执行满足条件的异步代码

console.log("1"); // 同步代码
setTimeout(function () { // 异步代码
	console.log("2");
}, 500);
console.log("3"); // 同步代码
alert("4"); // 同步代码
//执行顺序1-->3-->4(需要把弹出窗关闭后才算执行完毕)-->2

拓展链接: link

回顾知识

json 与对象

JSON 是 JS 对象的字符串表示法
它使用文本表示一个 JS 对象的信息，本质是一个字符串

var obj = {"a" : '1' , "b" : '2'};//对象（关键字的双引号可省略）
var json = '{"a": "1", "b": "2"}';//json

转换关系
对象—>json （JSON.stringify（）方法）

var json = JSON.stringify({a: '1', b: '2'}); //结果是 '{"a": "1", "b": "2"}'

json—>对象 （JSON.parse（）方法）

var obj = JSON.parse('{"a": "1", "b": "2"}'); //结果是 {a: '1', b: '2'}

---

总结

今日完成12个任务点
CORS主要是跨域问题引起的报错通过script标签可以解决