JS新特性
H5新增存储方案
1.SessionStorage和LocalStorage简介
和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的
2.Cookie、 SessionStorage、LocalStorage区别
2.1生命周期(同一浏览器下)
Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
LocalStorage生命周期: 除非被清除，否则永久保存
2.2容量
Cookie容量: 有大小(4KB左右)和个数(20~50)限制
SessionStorage容量: 有大小限制(5M左右) 老外写的SessionStorage支撑测试
LocalStorage容量: 有大小限制(5M左右) 老外写的LocalStorage支撑测试
2.3网络请求
Cookie网络请求: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
3.Cookie、 SessionStorage、LocalStorage应用场景
Cookie: 判断用户是否登录
LocalStorage: 购物车
sessionStorage: 表单数据
4.注意点:
无论通过以上哪种方式存储的数据, 切记不能将敏感数据直接存储到本地
// 存储cookie
document.cookie = "myName=hhh;path=/;domain=127.0.0.1;";
//存储sessionStorage,删除sessionStorage,清空sessionStorage
sessionStorage.setItem("age", "34");
sessionStorage.removeItem("age");
sessionStorage.clear();
//存储localStorage,删除localStorage,清空localStorage
localStorage.setItem("name", "lnj");
localStorage.removeItem("name");
localStorage.clear();
同源策略
1.什么是同源策略?
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域
http://www.baidu.com:80/index.html
协议: http/https/…
一级域名: baidu.com/taobao.com
二级域名: www/study/edu/…
端口号: 80/3306/…
// 协议+一级域名+二级域名+端口号都相同, 所以同源
http://www.it666.com:80/index.html
http://www.it666.com:80/detail.html
// 协议不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
https://www.it666.com:80/index.html
// 一级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.itzb.com:80/index.html
// 二级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://edu.it666.com:80/index.html
// 端口号不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.it666.com:8090/index.html
//ajax默认同源
$.ajax({
url:"http://127.0.0.1:80/jQuery/Ajax/xxx.php",
success: function (msg) {
console.log(msg);
},
error: function () {
console.log("请求失败");
}
});
JSONP
什么是JSONP?
JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据
JSONP实现跨域访问的原理
2.1 在同一界面中可以定义多个script标签
2.2 同一个界面中多个script标签中的数据可以相互访问
2.3 可以通过script的src属性导入其它资源
2.4 通过src属性导入其它资源的本质就是将资源拷贝到script标签中
2.5 script的src属性不仅能导入本地资源, 还能导入远程资源
2.6 由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
<script src="http://127.0.0.1:80/jQuery/Ajax/xx.php">
/*
当前网页的地址: http://127.0.0.1:63342/jQuery/Ajax/jsonp%E5%8E%9F%E7%90%86.html
远程资源的地址: http://127.0.0.1:80/jQuery/Ajax/jsonp.php
*/
/*
优化一
1.在企业开发中通过JSONP来获取跨域的数据,
一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用
*/
/*
优化二
2.当前服务器返回的函数调用名称写死了 例如服务前返回demo() ,那么本地就必须有一个
服务器返回函数叫什么名称, 我们本地就必须定义一个叫什么名称的函数
解决方案:
通过URL参数的方式来动态指定函数名称
例:http://127.0.0.1:80/jQuery/Ajax/20-jsonp.php?cb=test
cb=test就是指定返回的函数调用名为test,后台获取到就可以定义一个test方法返回
*/
/*
优化三
3.由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行
所以请求数据的script标签必须放到后面
解决方案:
通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,
不用等到前面的标签加载完就可以执行后面的script标签
*/
let oScript = document.createElement("script");
oScript.src = "http://127.0.0.1:80/jQuery/Ajax/20-jsonp.php?cb=test";
document.body.appendChild(oScript);