同源战略是什么？
javascript跨域通讯
同源：两个文档同源需满足
- 协定雷同
- 域名雷同
- 端口雷同
跨域通讯：js举行DOM操纵、通讯时假如目的与当前窗口不满足同源前提，浏览器为了平安会阻挠跨域操纵。跨域通讯平常有以下要领
- 假如是log之类的简朴单项通讯，新建<img>,<script>,<link>,<iframe>元素，经由历程src，href属性设置为目的url。完成跨域请求
- 假如请求json数据，运用<script>举行jsonp请求
- 当代浏览器中多窗口通讯运用HTML5范例的targetWindow.postMessage(data, origin);个中data是须要发送的对象，origin是目的窗口的origin。window.addEventListener(‘message’, handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送音讯的窗口援用
- 内部服务器代办请求跨域url，然后返回数据
- 跨域请求数据，当代浏览器可运用HTML5范例的CORS功用，只需目的服务器返回HTTP头部Access-Control-Allow-Origin: *即可像平常ajax一样接见跨域资本
所谓的跨域问题是因为浏览器的同源战略限定的，当协定域名端口号差别即为跨域，关于协定和端口来讲，前端不能处置惩罚。处置惩罚跨域的几种体式格局：
- JSONP 跨域 ：
这类体式格局跨域是经由历程script标签引入js文件，这个js文件又会返回一个js函数挪用，也就是请求后经由历程callback的体式格局回传效果长处：
1.不受同源战略的限定
2.兼容性更好
3.支撑老版本浏览器
瑕玷：只支撑get请求
- CORS 跨域
其道理是运用自定义的http头部请求，让浏览器与服务器之间举行沟通，从而决议请求或相应是不是胜利
长处：
1.支撑一切范例的http请求
2.比jsonp有更好的毛病处置惩罚机制
3.被大多数浏览器所支撑
- h5的postMessage要领
window.postMessage(message,targetOrigin) 要领是html5新引进的特征，能够运用它来向别的的window对象发送音讯，不管这个window对象是属于同源或差别源，现在IE8+、FireFox、Chrome、Opera等浏览器都已支撑window.postMessage要领。这类要领不能和服务端交流数据，只能在两个窗口（iframe）之间交流数据
get/post区分
- 表单的method属性设置post时发送的是post请求，其他都是get请求
- get请求经由历程url地点发送请求参数，参数能够直接在地点栏中显现，平安性较差；post是经由历程请求体发送请求参数，参数不能直接显现，相对平安
- get请求URL地点有长度限定，依据浏览器的差别，限定字节长度差别，post请求没有长度限定
补充get和post请求在缓存方面的区分
- get请求类似于查找的历程，用户猎取数据，能够不必每次都与数据库衔接，所以能够运用缓存。
- post差别，post做的平常是修正和删除的事情，所以必需与数据库交互，所以不能运用缓存。因此get请求适合于请求缓存。
http/https区分
- https协定须要到ca请求证书，平常免费证书较少，因此须要肯定用度。
- http是超文本传输协定，信息是明文传输，https则是具有平安性的ssl加密传输协定。
- http和https运用的是完整差别的衔接体式格局，用的端口也不一样，前者是80，后者是443。
- http的衔接很简朴，是无状况的；HTTPS协定是由SSL+HTTP协定构建的可举行加密传输、身份认证的收集协定，比http协定平安
你相识的http状况码
- 1** 信息，服务器收到请求，须要请求者继承实行操纵(101，晋级为websocket协定)
- 2** 胜利，操纵被胜利吸收并处置惩罚(206,部分内容，分段传输)
- 3** 重定向，须要进一步操纵以完成请求(301,302重定向；304掷中缓存)
- 4** 客户端毛病，请求包括语法毛病或没法完成请求(401,请求身份验证；403，服务器明白客服端需求，然则制止接见)
- 5** 服务器毛病，服务器在处置惩罚请求的历程中发作了毛病
运用程序存储和离线web运用
HTML5新增运用程序缓存，许可web运用将运用程序本身保留到用户浏览器中，用户离线状况也能接见。 1.为html元素设置manifest属性:<html manifest=”myapp.appcache”>，个中后缀名只是一个商定，真正辨认体式格局是经由历程text/cache-manifest作为MIME范例。所以须要设置服务器保证设置准确 2.manifest文件首行动CACHE MANIFEST，其他就是要缓存的URL列表，每一个一行，相对途径都相关于manifest文件的url。解释以#开首 3.url分为三种范例：CACHE:为默许范例。NETWORK：示意资本从不缓存。 FALLBACK:每行包括两个url，第二个URL是指须要加载和存储在缓存中的资本， 第一个URL是一个前缀。任何婚配该前缀的URL都不会缓存，假如从收集中载入如许的URL失利的话，就会用第二个URL指定的缓存资本来替换。以下是一个文件例子：
CACHE MANIFEST
CACHE:
myapp.html
myapp.css
myapp.js
FALLBACK:
videos/ offline_help.html
NETWORK:
cgi/客户端存储localStorage和sessionStorage
- localStorage有效期为永远，sessionStorage有效期为顶层窗口封闭前
- 同源文档能够读取并修正localStorage数据，sessionStorage只许可同一个窗口下的文档接见，如经由历程iframe引入的同源文档。
- Storage对象平常被当作平常javascript对象运用：经由历程设置属性来存取字符串值，也能够经由历程setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除一切数据，length示意已存储的数据项数量，key(index)返回对应索引的key
localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x
// 罗列一切存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
localStorage.removeItem('x'); // remove x
localStorage.clear(); // remove all datacookie及其操纵
- cookie是web浏览器存储的少许数据，最早设想为服务器端运用，作为HTTP协定的扩大完成。cookie数据会自动在浏览器和服务器之间传输。
- 经由历程读写cookie检测是不是支撑
- cookie属性著名，值，max-age，path, domain，secure；
- cookie默许有效期为浏览器会话，一旦用户封闭浏览器，数据就丧失，经由历程设置max-age=seconds属性通知浏览器- cookie有效期
- cookie作用域经由历程文档源和文档途径来肯定，经由历程path和domain举行设置，web页面同目次或子目次文档都可接见
- 经由历程cookie保留数据的要领为：为document.cookie设置一个相符目的的字符串以下
- 读取document.cookie取得’; ‘分开的字符串，key=value,剖析获得效果
document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';
document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要转变cookie的值，须要运用雷同的名字、途径和域，新的值
// 来设置cookie，一样的要领能够用来转变有效期
// 设置max-age为0能够删除指定cookie
//读取cookie，接见document.cookie返回键值对构成的字符串，
//差别键值对之间用'; '分开。经由历程剖析取得须要的值