JS新特性（一）

最新推荐文章于 2025-02-28 00:15:00 发布

qq_35381464

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量769

点赞数

本文链接：https://blog.youkuaiyun.com/qq_35381464/article/details/106603003

版权

H5新增存储方案

1.什么是SessionStorage和LocalStorage

和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的

2.Cookie、 SessionStorage、LocalStorage区别

2.1生命周期(同一浏览器下)

Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间

SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间

LocalStorage生命周期: 除非被清除，否则永久保存

2.2容量

Cookie容量: 有大小(4KB左右)和个数(20~50)限制

SessionStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/

LocalStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/

2.3网络请求

Cookie网络请求: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信

LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信

3.Cookie、 SessionStorage、LocalStorage应用场景

Cookie: 判断用户是否登录

LocalStorage: 购物车

sessionStorage: 表单数据

4.注意点:

无论通过以上那种方式存储的数据, 切记不能将敏感数据直接存储到本地

<script>
   
    $('.save').click(function () {
        document.cookie = "myName=it666;path=/;domain=127.0.0.1;";
    });
    $('.send').click(function () {
        ajax("18-cookie.php",
            {},
            3000,
            function (xhr) {
                console.log("请求成功", xhr.responseText);
            }, function () {
                console.log("请求失败");
            });
    });

    $('.btn1').click(function () {
        // sessionStorage.setItem("name", "lnj");
        // sessionStorage.setItem("age", "34");
        localStorage.setItem("name", "lnj");
    });
    $('.btn2').click(function () {
        sessionStorage.removeItem("name");
    });
    $('.btn3').click(function () {
        sessionStorage.setItem("name", "it666");
    });
    $('.btn4').click(function () {
        let value = sessionStorage.getItem("name");
        alert(value);
    });
    $('.btn5').click(function () {
        sessionStorage.clear();
    });

</script>

同源策略

1.什么是同源策略?

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域

2.同源策略带来的影响

在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据

但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的

这时如果再通过Ajax请求数据就会拿不到跨域数据

3.跨域解决方案

jsonp

document.domain+iframe

location.hash + iframe

window.name + iframe

window.postMessage

flash等第三方插件

 $('.send').click(function () {
        $.ajax({
            url:"http://127.0.0.1:80/jQuery/Ajax/19-SameOriginPolicy.php",
            success: function (msg) {
                console.log(msg);
            },
            error: function () {
                console.log("请求失败");
            }
        });
    });

1.什么是JSONP?

JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据

2.JSONP实现跨域访问的原理

2.1在同一界面中可以定义多个script标签

2.2同一个界面中多个script标签中的数据可以相互访问

2.3可以通过script的src属性导入其它资源

2.4通过src属性导入其它资源的本质就是将资源拷贝到script标签中

2.5script的src属性不仅能导入本地资源, 还能导入远程资源

2.6由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

JSONP优化

优化一

1.在企业开发中通过JSONP来获取跨域的数据,

一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用

优化二

2.当前服务器返回的函数调用名称写死了

服务器返回函数叫什么名称, 我们本地就必须定义一个叫什么名称的函数

解决方案:

通过URL参数的方式来动态指定函数名称

优化三

3.由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行

所以请求数据的script标签必须放到后面

解决方案:

通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,

不用等到前面的标签加载完就可以执行后面的script标签

 $.ajax({
        url: "http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php",
        // url: "http://www.maomaoedu.com/test.php",
        data:{
            "teacher": "lnj",
            "age": 34
        },
        dataType: "jsonp", // 告诉jQuery需要请求跨域的数据
        jsonp: "cb",  // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取
        jsonpCallback: "lnj", // 告诉jQuery服务器在获取回调函数名称的时候回调函数的名称是什么
        success: function (msg) {
            console.log(msg);
        },
        error: function (xhr) {
            console.log(xhr.status);
        }
    });

JSONP封装

<script>
    myJSONP({
            url: "http://127.0.0.1:80/jQuery/Ajax/22-jsonp.php",
            data:{
                "teacher": "lnj",
                "age": 34
            },
            jsonp: "cb",  // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取
            jsonpCallback: "lnj", // 告诉jQuery服务器在获取回调函数名称的时候回调函数的名称是什么
            success: function (msg) {
                console.log(msg);
            }
        });
</script>

JS是单线程的

1.JS是单线程的

所以JS中的代码都是串行的, 前面没有执行完毕后面不能执行

2.同步代码和异步代码

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

2.1程序运行会从上至下依次执行所有的同步代码

2.2在执行的过程中如果遇到异步代码会将异步代码放到事件循环中

2.3当所有同步代码都执行完毕后, JS会不断检测事件循环中的异步代码是否满足条件

2.4一旦满足条件就执行满足条件的异步代码

2.为什么JS是单线程的?

avaScript的单线程，与它的用途有关。

作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。